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

Sam 发表于 Dev

山姆

我有一个简单的页面，其中包含表单和表单外部的按钮。我试图在单击按钮时验证表单。我已经在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>

$(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);
        },        
     });
   });
});

小提琴

活泼的

如前所述，原代码是一个目标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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-4

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章