将数据属性与jquery验证一起使用

Cla*_*awg 5 jquery jquery-validate custom-data-attribute

是否可以将数据属性用于JQuery Validate插件.我目前使用的是类名,例如

class="{required:true, messages:{required:'You must choose a site.'}}"` 
Run Code Online (Sandbox Code Playgroud)

但需要使用数据属性,例如

data-validate="{required:true, messages:{required:'You must choose a site.'}}"`
Run Code Online (Sandbox Code Playgroud)

输入可能具有多个与其关联的数据属性,这与验证无关,例如

<input name="txt_txt001" type="text" maxlength="30" id="txt_txt001" class= "     
{required:true, messages:{required:'This field is required.'} }" data-
children="ddl_txt007,ddl_txt008" data-optionGroup="1" data-optionGroupParent=""  />
Run Code Online (Sandbox Code Playgroud)

我知道ketchup插件提供了这个,但不想转移到它,因为我已经把大量工作用于使用JQuery Validate进行页面设置.

谢谢

小智 6

尝试使用以下chages来验证1.9.0.我做了几个mod,所以我的行号可能会关闭,但是这里有:

在149左右:

var data = $.validator.normalizeRules(
    $.extend(
        {},
        $.validator.metadataRules(element),
        $.validator.classRules(element),
        $.validator.dataRules(element), // add this
        $.validator.attributeRules(element),
        $.validator.staticRules(element)
    ), element);
Run Code Online (Sandbox Code Playgroud)

在ln 782附近的classRules之后添加这个:

// pretty much steal everything from the class based settings
dataRules: function(element) {
    var rules = {};
    var classes = $(element).data("validation");
    classes && $.each(classes.split(' '), function() {
        if (this in $.validator.classRuleSettings) {
            $.extend(rules, $.validator.classRuleSettings[this]);
        }
    });
    return rules;
},
Run Code Online (Sandbox Code Playgroud)

将任何其他验证器添加到类规则:

jQuery.validator.addClassRules({
    phone: {
        phoneUS: true
    },
    zipcode: {
        zipcode: true
    },
    notFirstSelect: {
        notFirstSelect : true
    }
});
Run Code Online (Sandbox Code Playgroud)

然后data-validation为您的for字段添加一个属性:

<input type="text" data-validation="zipcode required" maxlength="10" class="inputText med" value="" name="zip" id="zip">
Run Code Online (Sandbox Code Playgroud)

这对我来说非常好.请查看:http://www.roomandboard.com/rnb/business_interiors/contactus/send.do以获取此示例.


Dav*_*ing 1

我没有使用过该插件,但是 \xe2\x80\x99t 似乎没有一个内置选项可以从其获取规则的位置更改属性。但是如果你查看第 行的未压缩源代码767,你\xe2\x80\x99 会看到一个classRules方法。

\n\n

在此方法中,在线769该行有:

\n\n
var classes = $(element).attr('class');\n
Run Code Online (Sandbox Code Playgroud)\n\n

您可以尝试将其更改为:

\n\n
var classes = $(element).attr('data-validate');\n
Run Code Online (Sandbox Code Playgroud)\n\n

如前所述,我还没有对此进行测试,尽管将此类内容放入数据属性中似乎比插件默认建议的类更符合逻辑和语义。

\n