jQuery驗證插件僅驗證特定的表單域

Question

我正在嘗試基本的客戶端表單驗證使用jQuery驗證插件。我有一個基本註冊表單，如果我點擊一個按鈕來創建一個帳戶，所有字段爲空（只是爲測試），我得到所有表單域預期好的錯誤消息，除了只有一個字段輸入手機號碼。我從互聯網上下載了代碼，這是我添加的唯一字段。我使用Xampp，在將所有文件移動到另一臺計算機並嘗試測試相同的驗證後，事情變得更加奇怪，猜猜是什麼？ 它不再按預期在所有字段工作。這個問題已經炒我的大腦，任何幫助，我將低於感激是代碼

HTML

 <h2 class="form-signin-heading">Sign Up</h2><hr /> 

     <div id="error"> 
     </div> 

     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" /> 
     </div> 

     <div class="form-group"> 
      <input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" /> 
      <span id="check-e"></span> 
     </div> 

     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Cellphone" name="user_cellphone" id="user_cellphone" /> 
     </div> 
    <div class="form-group"> 
      <input type="password" class="form-control" placeholder="Password" name="password" id="password" /> 
     </div> 

     <div class="form-group"> 
      <input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" /> 
     </div> 
     <hr /> 

     <div class="form-group"> 
      <button type="submit" class="btn btn-default" name="btn-save" id="btn-submit"> 
       <span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account 
      </button> 
     </div> 

    </form> 

JS

$('document').ready(function() 
{ 
/* validation */ 
$("#register-form").validate({ 
    rules: 
    { 
     user_name: { 
      required: true, 
      minlength: 3 
     }, 
     user_cellphone: { 
      required: true, 
      number: true 
     }, 
     password: { 
      required: true, 
      minlength: 8, 
      maxlength: 15 
     }, 
     cpassword: { 
      required: true, 
      equalTo: '#password' 
     }, 
     user_email: { 
      required: true, 
      email: true 
     } 
    }, 
    messages: 
    { 
     user_name: "Enter a Valid Username", 
     user_cellphone:{ 
      required: "Provide a phone number", 
      number: "Phone Needs To Be a number" 
     }, 
     password:{ 
      required: "Provide a Password", 
      minlength: "Password Needs To Be Minimum of 8 Characters" 
     }, 
     user_email: "Enter a Valid Email", 
     cpassword:{ 
      required: "Retype Your Password", 
      equalTo: "Password Mismatch! Retype" 
     } 
    }, 
    submitHandler: submitForm 
}); 
/* validation */ 
/* form submit */ 
function submitForm() 
{ 
    var data = $("#register-form").serialize(); 

    $.ajax({ 

     type : 'POST', 
     url : 'register.php', 
     data : data, 
     beforeSend: function() 
     { 
      $("#error").fadeOut(); 
      $("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...'); 
     }, 
     success : function(data) 
     { 
      if(data==1){ 

       $("#error").fadeIn(1000, function(){ 


        $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; Sorry email already taken !</div>'); 

        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account'); 

       }); 

      } 
      else if(data=="registered") 
      { 

       $("#btn-submit").html('Signing Up'); 
       setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load("successreg.php"); }); ',5000); 

      } 
      else{ 

       $("#error").fadeIn(1000, function(){ 

        $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+data+' !</div>'); 

        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account'); 

       }); 

      } 
     } 
    }); 
    return false; 
} 
/* form submit */ 

下面是形式的快照，我不知道問題出在哪裏。

Answer 1

你聲明number規則，但你相應的信息被分配給minlength規則...

rules: { 
    user_cellphone: { 
     required: true, 
     number: true 
    }, 
    .... 
}, 
messages: { 
    user_cellphone: { 
     required: "Provide a phone number", 
     minlength: "Phone Needs To Be a number" 
    }, 
    .... 

而且document應該不在引號...

$(document).ready(function() {... 

Working DEMO：http://jsfiddle.net/bh5g0wfe/

旁註：你可能想太多閱讀本...

Dangerous implications of Allman style in JavaScript