使用 jquery validate 进行通用选择

Posted

技术标签:

【中文标题】使用 jquery validate 进行通用选择【英文标题】:Generic selection using jquery validate 【发布时间】:2012-06-14 01:56:29 【问题描述】:

作为一个相对的 jquery 新手,如果我的问题有一个简单的解决方案,请多多包涵。当通过unique ID 选择时,使用 jquery validate 效果很好。

$("#myForm").validate(
    debug: false,
    rules:
    
         field1: "Required"
    ,
    messages:
    
         field1: "Required"
    ,
    submitHandler: function(form) 
         $.post('formAction.php', $("#myForm").serialize(), function(data) 
            $('#results').html(data);
         );
    
);

我需要扩展它以通用地处理一些自动生成的表单myForm1, myForm2 等。

我可以通过通用类选择器$("myForm") 进行验证,然后将submitHander 应用于特定表单(myForm1myForm2 等),例如:

$(".myForm").validate(
    debug: false,
    rules:
    
         field1: "Required"
    ,
    messages:
    
         field2: "Required"
    ,
    submitHandler: function(form) 
         $.post('formAction.php', $(this).serialize(), function(data) 
            $('#results').html(data);
         );
    
);

非常感谢

【问题讨论】:

【参考方案1】:

试试这个

$('[id^=myForm]').validate(); // work for id pattern myForm1, myForm2...
                              // this selector will target forms whose id start
                              // with myForm

$('.myForm').validate() // giving a common class to all forms

像这样自动完成调用submitHandler

 validator.settings.submitHandler.call( validator, validator.currentForm );

这意味着this 将引用validator object 而不是form,所以使用form 参数来引用表单并像这样序列化它的字段

 $(form).serialize()

因此,在您提交处理程序而不是 $(this).serialize() 使用 $(form).serialize()

【讨论】:

谢谢,我应该更详细一点。我已经尝试过通用调用选择器 $('.myForm') 和使用通配符 $('[id^=myForm]')。这很好,但是我如何引用所选的单个表单。在上面的示例中,我用 $(this) m 说明了这一点,但该选择器无效。希望我解释得更好?【参考方案2】:

e validate 方法不会链接对表单的引用,因此建议 $(form).serialize 仍然指的是共享公共类的第一个表单。巨大的帮助,因为它让我找到了解决方法:-

https://github.com/jzaefferer/jquery-validation/issues/157

$(".myForm").each(function(index,element) 
  $(element).validate(

    debug: false,

    rules:
    
         field1: "Required"
    ,
    messages:
    
         field2: "Required"
    ,
    submitHandler: function(form) 
         $.post('formAction.php', $(form).serialize(), function(data) 
            $('#results').html(data);
         );
    
  );
 );

【讨论】:

以上是关于使用 jquery validate 进行通用选择的主要内容,如果未能解决你的问题,请参考以下文章

JQuery Validation Plugin - 如果用户选择任一单选按钮,则验证字段。

当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件,至少要选择两次时间,才能验证成功的问题

最小最大价格范围验证不适用于 jquery.validate.js

jQuery学习——使用JQ插件validation进行表单校验

JQuery Validate:Safari中的“未选择”

:blank 选择器不适用于复选框 jQuery Validate()