jQuery驗證未驗證提交事件是否正確

我使用jQuery validation plugin，並且已經使用了很多次進行表單驗證，但第一次面對這個問題，不明白爲什麼不驗證。jQuery驗證未驗證提交事件是否正確

Issue：當我點擊第一次提交按鈕時，表單驗證沒有appering，但當我第二次出現驗證信息時出現。

jQuery代碼：

$(document).ready(function() { 
    $(document.body).on('submit', 'form#register-form', function(event) { 
     event.preventDefault(); 
     $("#register-form").validate({ 

      // Specify the validation rules 
      rules : { 
       firstname : "required", 
       lastname : "required" 
      }, 

      // Specify the validation error messages 
      messages : { 
       firstname : "Please enter your first name", 
       lastname : "Please enter your last name" 
      } 
     }); 
    }); 
});

HTML代碼：

<h1>Register here</h1> 

<form action="#" method="post" id="register-form"> 
    <div class="label"> 
     First Name 
    </div> 
    <input type="text" id="firstname" name="firstname" /> 
    <br /> 
    <div class="label"> 
     Last Name 
    </div> 
    <input type="text" id="lastname" name="lastname" /> 
    <br /> 
    <div style="margin-left:140px;"> 
     <input type="submit" name="submit" value="Submit" /> 
    </div> 
</form>

的jsfiddle：http://jsfiddle.net/mananpatel/68vgh7x1/1/

任何想法，我做錯了。

來源

2014-11-05 Mr.Happy

在你的情況下，你只在第一次提交完成時初始化驗證插件，所以插件在第一次提交操作期間沒有被調用。

您需要從提交處理程序中初始化驗證插件。您可以使用驗證框架提供的submitHandler選項來提交表單，而不是使用您自己的提交處理程序 - 只會調用表單有效。否則在提交處理程序中，您將不得不檢查表單是否有效。

$("#register-form").validate({ 
 

 
    // Specify the validation rules 
 
    rules: { 
 
     firstname: "required", 
 
     lastname: "required" 
 
    }, 
 

 
    // Specify the validation error messages 
 
    messages: { 
 
     firstname: "Please enter your first name", 
 
     lastname: "Please enter your last name" 
 
    }, 
 
     
 
    submitHandler: function(){ 
 
     //do your form submit here 
 
     return false; 
 
    } 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 

 
<h1>Register here</h1> 
 

 
<!-- The form that will be parsed by jQuery before submit --> 
 
<form action="#" method="post" id="register-form"> 
 
    <div class="label">First Name</div> 
 
    <input type="text" id="firstname" name="firstname" /> 
 
    <br /> 
 
    <div class="label">Last Name</div> 
 
    <input type="text" id="lastname" name="lastname" /> 
 
    <br /> 
 
    <div style="margin-left:140px;"> 
 
     <input type="submit" name="submit" value="Submit" /> 
 
    </div> 
 
</form>

來源

2014-11-05 06:59:41

要調用方法的onsubmit。 DOM準備就緒而不是此驗證。看一看這樣的：

http://jsfiddle.net/68vgh7x1/3/

$("#register-form").validate({ 
     // Specify the validation rules 
     rules: { 
      firstname: "required", 
      lastname: "required" 
     }, 

     // Specify the validation error messages 
     messages: { 
      firstname: "Please enter your first name", 
      lastname: "Please enter your last name" 
     } 
    });

來源

2014-11-05 07:00:02

$(document).ready(function() { 
    $("#register-form").validate({ 

     // Specify the validation rules 
     rules : { 
      firstname : "required", 
      lastname : "required" 
     }, 

     // Specify the validation error messages 
     messages : { 
      firstname : "Please enter your first name", 
      lastname : "Please enter your last name" 
     } 
    }); 
    // adding submit event is unnecessary. 
});

來源

2014-11-05 07:04:10 sujin

如果您使用HTML5，我建議使用元素屬性：