The HTML5 data attribute rule uses the jQuery Validate plugin

Using the jQuery Validate Plugin with HTML5 Data Attribute Rules

The jQuery Validation Plugin is a useful Validation Plugin. ASP.NET MVC uses the Plugin for Client Side Validation! It has a very nice JavaScript API for writing validation rules or information validation. You can check out Documentation for details, but one feature that is not fully documented is the use of HTML5 data properties

I think I first learned about this feature because ASP.NET MVC uses jQuery Validate’s non-inductive validation rule. This means that instead of typing inline javascript in your tag, use the HTML data attribute instead. Obviously you can use any data validation rules after 1.11.0.

Basic example

If you have no idea, there’s a simple example on JS Fiddle to access JS Fiddle.

Here’s the code:

<! DOCTYPE html> <html> <form id="validate-me-plz">
        <div>
            Required: <input type="text" name="firstName" data-rule-required="true" />
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form>

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

    <script type="text/javascript">
        $('#validate-me-plz').validate();
    </script>
</html>
Copy the code

As you can see, we have a data-rule-required attribute set to true at the input box, and we only call the.validate() method at the end. This validation method validates data attributes and operates validation rules. As mentioned earlier, there are a number of validation rules for validation

Rules of the format

Add the following validation rules to the input element

data-rule-[rule name separate by dashes]="true" 
Copy the code

Here is an example:

Required – data-rule-required="true"
Email – data-rule-email="true"
Minimum Length = data-rule-minlength="6"

Prompt Message Format

JQuery Validation adds its own Validation rule by default, but you can also customize your own Validation rule. Use the following rules to specify authentication information

data-msg-[rule name separate by dashes]="The message you want."
Copy the code

Here is an example:

Required – data-msg-required="Madam/sir, this field is required."
Email – data-msg-email="Let us spam you, enter a valid email address."

Complete example:

This is a more complete example on JS Fiddle. The sample entry contains different validation rules and validation information for JS Fiddle.

Complete code:

<! DOCTYPE html> <html> <form id="validate-me-plz">
        <div>
            Required: <input type="text" name="required" data-rule-required="true" />
        </div>
        <div>
            Required w/custom message: <input type="text" name="required-sassy" data-rule-required="true" data-msg-required="Please enter SOMETHING." />
        </div>
        <div>
            Email: <input type="text" name="email" data-rule-email="true"/>
        </div>
        <div>
            Email w/custom message: <input type="text" name="anotherEmail" data-rule-email="true" data-msg-email="Please enter a valid email address you dummy." />
        </div>
        <div>
            <input type="submit" value="Validate!" />
        </div>
    </form>

    <script type="text/javascript" src="/ / code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/ / ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

    <script type="text/javascript">
        $('#validate-me-plz').validate();
    </script>
</html>
Copy the code

How does it work

If you’re interested in how this works, look at Core.js around line 928. It simply uses the jQuery data() method to check each validation element, automatically converting the validation attribute in the data property to a rule.

value = $element.data("rule" + method[ 0 ].toUpperCase() + method.substring( 1 ).toLowerCase());
Copy the code

(ps) Here’s what the author thinks about dashes: But where are the dashes? I didn’t realize it, but data attributes can (should?) be referenced via jQuery without their dashes. Instead of the dashes you Camel Case the data attribute name, without the “data-” prefix. The above code results in something like this for the required rule: value = $element.data(“ruleRequired”); which maps to the data-rule-required attribute.

The validation rules

If you want to know which validators are available, go to look at the code for the validators in core or browse the additional Validators.

Here is the parsed code from GitHub, which I annotated as follows

The framework of new

Data-rule-mobile Verifies the mobile number
Data-rule-qq verifies the QQ number
Data-rule-chid Indicates the ID number
Data-rule-decimal Indicates the input decimal number
Data-rule-nospace noSpace is allowed
Data – rule – phoneZh fixed-line
Data-rule-phoneamobile Fixed-line phone number or mobile phone number

(Tested, core)

data-rule-required=”true”
data-rule-email=”true”

(Untested, core, but should work)

data-rule-url=”true”
data-rule-date=”true”
data-rule-dateISO=”true”
data-rule-number=”true”
data-rule-digits=”true”
data-rule-creditcard=”true”
data-rule-minlength=”6″
data-rule-maxlength=”24″
Data – rule – rangelength = 5, 10 “”
data-rule-min=”5″
data-rule-max=”10″
Data – rule – range = 5, 10 “”
data-rule-equalto=”#password”
data-rule-remote=”custom-validatation-endpoint.aspx”

(Untested, additional, but should work)

data-rule-accept=””
data-rule-bankaccountNL=”true”
data-rule-bankorgiroaccountNL=”true”
data-rule-bic=””
data-rule-cifES=””
data-rule-creditcardtypes=””
data-rule-currency=””
data-rule-dateITA=””
data-rule-dateNL=””
data-rule-extension=””
data-rule-giroaccountNL=””
data-rule-iban=””
data-rule-integer=”true”
data-rule-ipv4=”true”
data-rule-ipv6=”true”
data-rule-mobileNL=””
data-rule-mobileUK=””
data-rule-lettersonly=”true”
data-rule-nieES=””
data-rule-nifES=””
data-rule-nowhitespace=”true”
data-rule-pattern=””
data-rule-phoneNL=”true”
data-rule-phoneUK=”true”
data-rule-phoneUS=”true”
data-rule-phonesUK=”true”
data-rule-postalcodeNL=”true”
data-rule-postcodeUK=”true”
data-rule-require_from_group=””
data-rule-skip_or_fill_minimum=””
data-rule-strippedminlength=””
data-rule-time=””
data-rule-time12h=””
data-rule-url2=””
data-rule-vinUS=””
data-rule-zipcodeUS=”true”
data-rule-ziprange=””