1

我正在使用 jQuery 表单验证插件，当用户在表单为空时单击提交按钮时，我需要显示错误。但是，我的点击事件没有响应。

 <!DOCTYPE HTML>
    <html>
     <head>
        <link type = "text/css" rel="stylesheet" href="css/bootstrap.css" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
           <script type="text/javascript" src="http://jzaefferer.github.com/jquery-           validation/jquery.validate.js"></script>
           <script src="js/bootstrap.js"> </script>

           <script> 
                 $('#submit').click(function(){ 
                                 $('form').validate()
                             }); 

        </script> 
     </head>
     <body> 
     <form class = "well span6"> 

     <label> Username </label> 
     <input type="text" id = "myName" class ="span3" placeholder ="Type your username     here..." class = "required"/> 

      <label> Password</label> 
     <input type="text" id "myPassword" class ="span3" placeholder ="Type your password here..." class = "required"/> <br/> 

     <button id = "submit" class ="btn btn-primary">Submit </button>
     <button class = "" > Clear <br/></button><br/> 
     </form> 



     </body> 

    </html>

任何帮助都将受到赞赏和奖励。

4

2 回答 2

2

只需在文档准备好时将验证附加到表单，它会在用户尝试提交时自动验证：

$(function () {
    $("form").validate();
});

该validate()函数实际上并不执行验证，它只是初始化插件并将其附加到指定的表单。如果要执行按需验证，可以valid()在初始化后调用。但是，如果您只想在提交期间自动完成验证，则不需要这样做，这是插件的默认行为。

于 2012-12-31T23:42:51.463 回答
1

当您绑定.validate()到一个click或submit事件时，您只是在第一次单击时首先初始化插件。由于第一次单击按钮时验证插件尚未准备好，因此没有任何反应或行为异常。

正如已经指出的，您只需要在准备好 DOM 时初始化插件。该插件已经内置了事件处理程序，负责在各种事件（包括submit点击）上自动验证表单。

$(document).ready(function() {
    $('form').validate();
});​

您的元素上还有两个 class属性input导致required该类被忽略。

<input type="text" id="myName" class="span3" placeholder="Type your username here..." class="required" />

只需将它们组合起来：

<input type="text" name="myName" id="myName" class="span3 required" placeholder="Type your username here..." />

我还将name属性添加到每个input元素。

工作演示：

http://jsfiddle.net/ZjVWd/

于 2013-01-01T00:31:08.093 回答