1

検証後の警告が必要なフォームがあります。概念は単純で、値は許容されますが、通常の範囲外です。これが処理される方法は、検証 submitHandler にあります。

$('form').validate({
    highlight: function (element, errorClass) {$(element).addClass("invalidElem");},
    unhighlight: function (element, errorClass) {$(element).removeClass("invalidElem");},
    errorPlacement: function (error, element) {element.parent().parent().next().children().last().append(error);},
    errorClass: "errorMsg",

    submitHandler: function (form) {

        if (!WeightsRangeValidator("Height", txtHeight, heightWarning)) {
            return false;
        }

        if (!WeightsRangeValidator("Weight", txtWeight, weightWarning)) {
            return false;
        }

        form.submit();
    }        
});

問題は、フォームに送信ボタンとキャンセル ボタンの両方があることです。キャンセル ボタンにはクラス 'cancel' があり、検証が実行されません。ただし、submitHandler 関数はまだ呼び出されています。submitHandler ハンドラーの内容をバイパスするために、どの送信ボタンがクリックされているかを検出する方法が必要だと思います。

ここに動作中の jsFiddler があります: http://jsfiddle.net/scarleton/ZSVFP/

フォームには 3 つの有効な状態があります。チェック ボックス (両方ではない)、またはテキスト ボックスとドロップダウンの両方です。[OK] をクリックすると、検証が機能します。問題はキャンセル時に発生します。テキスト ボックスに何か入力してキャンセルを押しても、検証は引き続き検証を試みます。次のハンドラーを追加してみましたが、フォームが有効な場合はキャンセルできますが、テキストボックスに文字が入力されている場合はキャンセルできません。

btnCancel.click(function () {
    txtHeight.rules("remove");
    txtWeight.rules("remove");
    ddlDevice.rules("remove");
    $("#form").submit();
});
4

1 に答える 1

4 
$('.submitBtn').on('click', function(){
    var $frm =  $ ("#form");
    $frm.validate()
    if($frm).valid()){
       submitHandler();
     $frm.submit()
    }
})

$('.cancel').on('click', function(){
   var $frm =  $ ("#form");
   if($frm.valid()){
    // Do Some action ...;
   }
})

または 、buttonsm にクリック イベントを追加し、クリックするたびにどのボタンがクリックされたかに応じてパラメーターを変更できます。詳細については、例 [デモ][1] を参照してください。

jquery ドキュメント http://docs.jquery.com/Plugins/Validation[1]: http://jsfiddle.net/abaksheyev/jKuVa/1/を参照してください。

もっとスマートな方法があります

submitHandler: function (form) {
      var val = $("input[type=submit][clicked=true]").val() // add this line to handler
  .......


//Add this into document.ready 
$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});
于 2012-09-25T21:20:13.627 に答える