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驗證插件不顯示驗證消息

回答

相關問題