5

我有一个带有表单和表单外按钮的简单页面。我正在尝试验证按钮单击时的表单。我在 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);
        },        
     });
   });
});

小提琴

4

2 回答 2

8

如前所述，原始代码针对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/

于 2013-10-22T18:35:34.470 回答
3

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

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

于 2013-10-22T07:04:34.173 回答