单击按钮期间 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);
        },        
     });
   });
});

<强> fiddle

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/