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");
        }
    });

});

DEMO：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");
        }
    });

});

DEMO：http://jsfiddle.net/B5mVh/5/

当然，您不必使用这些可选的回调函数。如前所示，插件在没有它们的情况下工作得很好：

DEMO：http://jsfiddle.net/B5mVh/6/

Answer 2

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

这可以解决您的问题。

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

2 个答案: