按钮单击期间jQuery验证不起作用

Question

我有一个简单的页面,表单和窗体外的按钮.我试图在按钮单击上验证表单.我已经在document.onready函数中添加了表单验证规则.但是表单未经过验证.

HTML

<form id="form1" method="post" action="">
  <div>
    <input name="Name" id="name1" data-errorclass="error-name"/>
  </div>
  <input type="submit" id="name_id" value="Save"/>
</form>

JS

$(document).ready(function () {
   $("#name_id").click(function() {
     alert("called");
     $('.form1').validate({
       rules: {
        'Name' : {
            required: true
         }

       },
       messages: {
        'Name' : {
            required: 'Name is  required'
         }
       },
       errorClass: 'error-name',
       errorPlacement: function(err, element) {
        err.insertBefore(element);
        },        
     });
   });
});

小提琴

Answer 1

如前所述,原代码是一个目标class,.form1而实际的形式包含id="form1".修复选择器以定位id将快速解决此问题.

$('#form1`).validate({...

尽管已经发布了答案,但我觉得还需要发布一些有关此插件的常见误解的重要说明.

该.validate()方法仅用于插件初始化,而不是用于测试有效性的方法.所以放入.validate()一个click处理程序是没有意义的. .validate()只需要调用一次,因此每次单击时重复调用都是多余的,不必要的.

只要提交按钮位于<form>标记内,就不需要click处理程序,因为插件会自动捕获它.请参阅:http: //jsfiddle.net/B5mVh/6/

如果按钮位于该按钮之外,则<form>可以使用该.valid()方法测试表单的有效性.

$(document).ready(function () {

    $('#form1').validate({  // <-- INITIALIZE plugin on your form
        // your rules & options      
    });

    // For button OUTSIDE of form tags
    $("#name_id").click(function() {
        if ($('#form1').valid()) {
            alert("form is valid");
        } else {
            alert("form is invalid");
        }
    });

});

演示:http: //jsfiddle.net/B5mVh/4/

但是,在原始代码中,按钮位于表单内部,因此如前所述,根本不需要click处理程序.但是,如果要在click事件上运行某些代码,请使用submitHandler(有效时)和invalidHandler(无效时)回调函数.

$(document).ready(function () {

    $('#form1').validate({  // <-- INITIALIZE plugin on your form
        // your rules & options,
        submitHandler: function(form) {
             alert("form is valid");
             return false;
        },
        invalidHandler: function() {
            alert("form is invalid");
        }
    });

});

演示:http: //jsfiddle.net/B5mVh/5/

当然,您不必使用这些可选的回调函数.如前所示,插件在没有它们的情况下完美运行:

演示:http: //jsfiddle.net/B5mVh/6/