Using data-attributes with jquery validate

Question

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

Charmer

Answer 1

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.

Tonita

this is really cool but I think you're re-inventing the wheel. There are already unobtrusive validation generators and parsers for most of the major platforms – Krilov

Answer 2

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.

Oder

Hi David, I gave your suggestion a go but I couldnt get it to work. Thanks – Charmer

More likely : $(element).data('validate'); – Aekerly

Answer 3

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.

Leclaire

Answer 4

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.

Philanthropist

Answer 5

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/

Jarl

Sure: spabuilder.wordpress.com/2012/09/26/… Also fixed an obvious typo in the above comment (you don't need the .unobtrusive part anymore) – Jarl