Question

我正在使用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>

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

Answer 1

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

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

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

Answer 2

将.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/

按钮单击事件无响应

2 个答案: