Jquery.validate - 一頁 - 多個表單，一個提交好，其他不要

Question

在我的頁面上，我有3個完整的表單，每個表單都有自己的提交按鈕，每個表單和按鈕都有不同的id。

<form action="" method="post" class="form-horizontal" id="formA"> 
    ... 
    <button id="formASend" type="submit" class="btn"> Submit</button> 
</form> 

<form action="" method="post" class="form-horizontal" id="formB"> 
    ... 
    <button id="formBSend" type="submit" class="btn"> Submit</button> 
</form> 

<form action="" method="post" class="form-horizontal" id="formC"> 
    ... 
    <button id="formCSend" type="submit" class="btn"> Submit</button> 
</form> 

在javascript中，我爲每個下面的邏輯提交按鈕：

$.validator.setDefaults({ 
     debug:true, 
     errorElement: 'span', //default input error message container 
     errorClass: 'help-inline', // default input error message class 
     focusInvalid: false, // do not focus the last invalid input) 
     highlight: function (element) { // hightlight error inputs 
      $(element).closest('.control-group').addClass('error'); // set error class to the control group 
     }, 

     unhighlight: function (element) { // revert the change dony by hightlight 
      $(element) 
       .closest('.control-group').removeClass('error'); // set error class to the control group 
     } 

    }); 


$(function() { 

    var formA = $('#formA'); 

    // init validator obj and set the rules 
    formA.validate({ 
     rules: { 
      ... 
     } 
    }); 

    formA.submit(function() { 
     return formA.valid(); 
    }); 


    var formB = $('#formB'); 

    // init validator obj and set the rules 
    formB.validate({ 
     rules: { 
      ... 
     } 
    }); 

    formB.submit(function() { 
     return formB.valid(); 
    }); 

    var formC = $('#formC'); 

    // init validator obj and set the rules 
    formC.validate({ 
     rules: { 
      ... 
     } 
    }); 

    formC.submit(function() { 
     return formC.valid(); 
    }); 
}); 

提交工作確定爲第一種形式，並且不工作的其他兩個。我用DOMLint檢查了html索引，並且沒有問題。點擊事件被觸發，表單有效，提交返回true，但不提交。

驗證正常工作，只驗證提交的表單。

如何對每個表單應用不同的規則？

可能的解決方法

$.validator.setDefaults({ 
      debug:true, 
      errorElement: 'span', //default input error message container 
      errorClass: 'help-inline', // default input error message class 
      focusInvalid: false, // do not focus the last invalid input) 
      highlight: function (element) { // hightlight error inputs 
       $(element).closest('.control-group').addClass('error'); // set error class to the control group 
      }, 

      unhighlight: function (element) { // revert the change dony by hightlight 
       $(element) 
        .closest('.control-group').removeClass('error'); // set error class to the control group 
      }, 
      submitHandler: function (form) { 

       if ($(form).valid()) { 
        form.submit(); 
       } 
      } 
     }); 


    $(function() { 

     var formA = $('#formA'); 

     // init validator obj and set the rules 
     formA.validate({ 
      rules: { 
       ... 
      } 
     }); 

     var formB = $('#formB'); 

     // init validator obj and set the rules 
     formB.validate({ 
      rules: { 
       ... 
      } 
     }); 

     var formC = $('#formC'); 

     // init validator obj and set the rules 
     formC.validate({ 
      rules: { 
       ... 
      } 
     }); 
    }); 

添加提交處理程序，返回提交事件回到行動。

Answer 1

報價OP：

Click事件被觸發，形式是有效的，提交返回true，但 不提交。

debug: true選項將阻止實際的submit ...這就是它的目的。 As per documentation，

調試：
啓用調試模式。 如果屬實，表格爲未提交並且某些錯誤顯示在控制檯上（需要 Firebug或Firebug lite）。

您的代碼工作時，debug選項去掉完美的罰款：http://jsfiddle.net/9WrSH/1/

---

報價OP：

如何不同的規則適用於每種形式？

只要將每個窗體的.validate()函數內聲明的不同的規則。

$('#myform1').validate({ 
    rules: { 
     myfield1: { 
      required: true, 
      minlength: 3 
     }, 
     myfield2: { 
      required: true, 
      email: true 
     } 
    } 
}); 

參見：http://jsfiddle.net/9WrSH/1/

---

您不需要這些：

formA.submit(function() { 
    return formA.valid(); 
}); 

該插件已經捕獲submit按鈕，自動檢查形式，所以有沒有必要從外部處理事件。

---

你並不需要一個條件檢查或submit()的submitHandler內：

submitHandler: function (form) { 
// if ($(form).valid()) { 
//  form.submit(); 
// } 
} 

• 插件只觸發一個有效的形式對submitHandler回調，所以沒有必要檢查有效性。

• 該插件也會在表單有效時自動提交，所以絕對不需要撥打.submit()。

這些都是多餘的&多餘的。

Answer 2

您不需要處理提交事件。如果表格無效，將不會提交。或者這樣做：

//$('#formASend').click(function() { 
    formA.submit(function() { 

     return formA.valid(); 
    }); 
//}); 

外部單擊事件處理程序。你不需要這樣的：$('#formASend').click(function() {}); 我建議做這樣的：

var formA = $('#formA'); 
formA.validate({...}); 
// no need for these lines: 
//$('#formASend').click(function() { 
// formA.submit(function() { 

//  return formA.valid(); 
// }); 
//}); 

Answer 3

我使用多表單工作，並且不需要聲明表單的所有字段。只是用來把class =「required」放在你需要的字段上。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> 
&lt;form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formA"</span>&gt;<br /> 

<輸入類型= 「文本」 名稱= 「名稱1」 級= 「需要」/ >
<按鈕ID = 「formASend」 類型= 「提交」 類= 「BTN」 >提交< /按鈕>
< /形式>
<形式行動= 「」 方法= 「POST」 類= 「形橫」 ID = 「formB」 >
< INPUT TYPE = 「文本」 名稱= 「NAME2」 類=」要求「/ >
<按鈕ID = 「formBSend」 類型= 「提交」 類= 「BTN」 >提交< /按鈕>
< /形式>
<形式行動= 「」 方法= 「POST」 類=「形狀配合水平的」 ID = 「formC」 >
< INPUT TYPE = 「文本」 名稱= 「NAME3」 類= 「需要」/ >
<按鈕ID = 「formCSend」 類型= 「提交」 類= 「BTN」 >提交< /按鈕>
< /形式>

和javascript

$(document).ready(function() { 
      $.validator.addClassRules('required', { 
       required: true 
      }); 
      $('#formA').validate(); 
      $('#formB').validate(); 
      $('#formC').validate(); 

}）;

看到：demo

Answer 4

100％的工作，以驗證多種形式：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("form").submit(function() { 

     var clikedForm = $(this); // Select Form 

     if (clikedForm.find("[name='mobile_no']").val() == '') { 
     alert('Enter Valid mobile number'); 
     return false; 
     } 
     if (clikedForm.find("[name='email_id']").val() == '') { 
     alert('Enter valid email id'); 
     return false; 
     } 

    }); 
    }); 
</script> 

我有一個單一的第5個表格。