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