jQuery验证插件不显示验证消息

我无法触发jQuery内的验证。当我点击提交按钮时，没有验证消息弹出。

我的HTML

<form id="myform"> 
    <table id="tblSegmentDetails"> 
     <tr> 
      <td> 
       <input type="text" id="tbname" /> 
      </td> 
      <td> 
       <input type="text" id="tbemail" /> 
      </td> 
      <td> 
       <input type="text" id="tbphone" /> 
      </td> 
      <td> 
       <input type="submit" value="Submit" /> 
      </td> 
     </tr> 
    </table> 
</form>

jQuery的

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script> 


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

    $("form[id='myform']").validate({ 
     rules: { 
      tbname: { 
       required: true, 
       minlength: 2, 
       maxlength: 50 
      }, 
      tbemail: { 
       required: true, 
       email: true, 
       minlength: 2, 
       maxlength: 50 
      }, 
      tbphone: { 
       required: true, 
       phoneUS: true, 
       minlength: 9, 
       maxlength: 20 
      } 
     }, 
     messages: { 
      name: { 
       required: "Please provide your name", 
       minlength: "Too few characters!", 
       maxlength: "Too many characters!" 
      }, 
      email: { 
       required: "Please provide your email", 
       email: "Your email address must be in the format of [email protected]", 
       minlength: "Too few characters!", 
       maxlength: "Too many characters!" 
      }, 
      phone_number: { 
       required: "Please provide your phone number", 
       phoneUS: "Please provide a valid US phone number", 
       minlength: "Too few characters!", 
       maxlength: "Too many characters!" 
      } 
     } 
    }); 
    // }); 
</script>

当我点击提交按钮，没有验证信息弹出式。

这是做客户端验证的正确方法吗？我相信我不想在模型中添加data-annotation。只是想做简单的客户端验证。

另一个问题是，如果我取消注释document.ready然后我得到以下错误。

当我点击提交按钮时，没有验证消息弹出。

来源

2014-09-03 user2322507

它不工作，因为你的投入要素的每一个丢失一个'name'属性。另外，在'rules'和'messages'选项中，输入只能通过它们的'name'属性来引用，这就是插件如何跟踪所有内容。 – Sparky 2014-09-03 19:15:28

我读过它可以用'id'或'name'完成 – user2322507 2014-09-03 19:31:44

你读错了。请参阅[文档]（http://jqueryvalidation.org/reference/#markup-recommendations）。 'name'属性是强制性的。 – Sparky 2014-09-03 19:54:07

不知道什么是你的代码的确切问题，但此代码的工作真的非常适合我，请参考下面的代码： -

<html> 
<head> 

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 

    <link href="runnable.css" rel="stylesheet" /> 
    <!-- Load jQuery and the validate plugin --> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 

    <!-- jQuery Form Validation code --> 
    <script> 

    // When the browser is ready... 
    $(function() { 

    // Setup form validation on the #register-form element 
    $("#register-form").validate({ 

     // Specify the validation rules 
     rules: { 
      firstname: "required", 
      lastname: "required", 
      email: { 
       required: true, 
       email: true 
      }, 
      password: { 
       required: true, 
       minlength: 5 
      }, 
      agree: "required" 
     }, 

     // Specify the validation error messages 
     messages: { 
      firstname: "Please enter your first name", 
      lastname: "Please enter your last name", 
      password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long" 
      }, 
      email: "Please enter a valid email address", 
      agree: "Please accept our policy" 
     }, 

     submitHandler: function(form) { 
      form.submit(); 
     } 
    }); 

    }); 

    </script> 
</head> 
<body> 
    <h1>Register here</h1> 

    <!-- The form that will be parsed by jQuery before submit --> 
    <form action="" method="post" id="register-form" novalidate="novalidate"> 

    <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 class="label">Email</div><input type="text" id="email" name="email" /><br /> 
    <div class="label">Password</div><input type="password" id="password" name="password" /><br /> 
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div> 

    </form> 

</body> 
</html> 



<style> 
.label { 
    width:100px; 
    text-align:right; 
    float:left; 
    padding-right:10px; 
    font-weight:bold; 
} 
#register-form label.error { 
    color:#FB3A3A; 
    font-weight:bold; 
} 
h1 { 
    font-family: Helvetica; 
    font-weight: 100; 
    color:#333; 
    padding-bottom:20px; 
} 
</style>

来源

2014-09-03 18:35:56

如果您不知道您的工作代码与OP的破解代码不同，那么他（或任何读者）应该如何知道？ – Sparky 2014-09-03 19:03:47

jQuery验证插件不显示验证消息

回答

相关问题