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/

Answer 2

在 jQuery 的 validate() 函数中，您在具有类 .form1 的表单上调用它，您应该将其正确命名为相应的 ID #form1。

这应该可以解决您的问题。