CODEWITHSUNDEEP
jqueryjquery-validatecustom-data-attribute
Clawg
Clawg

Reputation: 349

Using data-attributes with jquery validate

Is it possible to use data-attributes to with the JQuery Validate plugin. I currently use the class name e.g. 

class="{required:true, messages:{required:'You must choose a site.'}}"`

but need to use the data attribute e.g. 

data-validate="{required:true, messages:{required:'You must choose a site.'}}"`

The inputs may have more than one data attribute associated with it which won't be related to the validation e.g. 

<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=""  />

I know the ketchup plugin offers this but dont want to move over to it as I've put loads of work into getting the page setup with JQuery Validate.

Thanks

Upvotes: 5

Views: 19873

Answers (5)

ValGe
ValGe

Reputation: 349

Recommend to Use data-attriubtes. You don't need jquery.validate.unobtrusive.js anymore. As of version 1.11.0 jquery.validate.js has that included by default. The syntax is kept the same, take a look at samples here: http://denverdeveloper.wordpress.com/2012/09/26/some-things-ive-learned-about-jquery-unobtrusive-validation/

Upvotes: 0

Tim Hobbs
Tim Hobbs

Reputation: 2017

I know this is old, but I just stumbled upon it looking for something related. I figured since there is no accepted answer you may still be in need of one? Anyway, David was really close:

var classes = $(element).data("validate");

This should grab the contents of your data-validate attribute. From there you should be able to parse or pass on the value as you are/were doing with the class name.

Upvotes: 1

RubyRed
RubyRed

Reputation: 121

Try making the following chages to validate 1.9.0. I've made a few mods so my line numbers may be off, but here goes:

Around ln 149:

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

Add this after classRules around ln 782:

// 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;
},

Add any additional validators to the class rules:

jQuery.validator.addClassRules({
    phone: {
        phoneUS: true
    },
    zipcode: {
        zipcode: true
    },
    notFirstSelect: {
        notFirstSelect : true
    }
});

Then add a data-validation attribute to your for fields:

<input type="text" data-validation="zipcode required" maxlength="10" class="inputText med" value="" name="zip" id="zip">

This has been working really well for me. Check out: http://www.roomandboard.com/rnb/business_interiors/contactus/send.do for an example of this in use.

Upvotes: 6

counsellorben
counsellorben

Reputation: 10924

ASP.NET MVC 3 incorporates unobtrusive validation using HTML5 data- attributes. The file jquery.validate.unobtrusive.js in the MVC 3 framework parses the data- attributes, and adds the rules into jquery.validate.js.

You can get more details in this article.

Upvotes: 1

David Hellsing
David Hellsing

Reputation: 108500

I havent used the plugin, but there doesn’t seem to be a built-in option to change attribute from where it fetches rules. But if you look at the uncompressed source at line 767, you’ll see a classRules method.

In this method at line 769 there is:

var classes = $(element).attr('class');

You can try to change this to:

var classes = $(element).attr('data-validate');

As said, I havent tested this, although it seems more logical and semantic to put this kind of stuff in a data attribute than a class as the plugin suggests per default.

Upvotes: 1

Related Questions