Deep Dive into Validation Rules

Implementation of validation rules has already been covered in one of my previous posts, but being implemented in 5 different ways caught me a bit off guard! 😀

Recently, I was working on a task which included implementation of validation rules on an input field. On checkout, where else? 😀 While I was in the process of researching what is where and how to complete the task, I have stumbled upon the following five levels of how validation rules are parsed in the validation phase. Here is a snippet of how it looks like in /lib/web/jquery/jquery.validate.js:

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

Let’s briefly cover each entry and demonstrate what is the connection when used in markup. In order to clearly see the differences in implementation, I have used different validation rules on purpose.

Metadata Rules

Metadata validation rules are defined via data-validate attribute (phoneUS):

<input id="field1" class="input-text" name="field1" type="text" value="phoneUS" data-validate="{ phoneUS: true }" />

Class Rules

Class-based validation rules are defined via class attribute (time12h):

<input id="field2" class="input-text time12h" name="field2" type="text" value="time12h" />

Attribute Rules

Attribute-based validation rules are defined as rule name as attribute and “true” as its value (ipv4):

<input id="field3" class="input-text" name="field3" type="text" value="ipv4" ipv4="true" />

Data Rules

Data-based validation rules are defined as any “data” attribute, followed by the “rule” word and the actual rule ID, like the following (ipv6):

<input id="field4" class="input-text" name="field4" type="text" value="data-rule-ipv6" data-rule-ipv6="" />

Static Rules

Static-based validation rules are defined as part of “data-mage-init” attribute, which is defined on the form itself (alphanumeric):

<form data-mage-init="{"validation":{ "rules": { "field5": { "alphanumeric": true } } }}">...</form>

Let’s see all of those rules in action. Here is the form with all of the fields on page load:

After submitting and validation, here is how the form looks like now:

As you can see on the screenshot, the validation rules are being applied and triggered correctly. However, there is a bug when parsing the attribute rules.

We all know how problematic variable types can be. Let’s create a mixin for this issue and fix it!

Register Your Mixin

Add a new entry in requirejs-config.js in your theme and add the following code:

var config = {
    config: {
        mixins: {
            'jquery/jquery.validate': {
                'jquery/jquery.validate-mixin': true
            }
        }
    },
};

Create the Mixin

Create the file jquery.validate-mixin.js in the correct folder and add the following code:

define([
    'mage/utils/wrapper',
    'jquery'
], function (wrapper, $) {
    'use strict';
 
    return function () {
        $.fn.validate = wrapper.wrapSuper($.fn.validate, function (options) {
            this._super(options);
 
            $.validator.attributeRules = wrapper.wrapSuper($.validator.attributeRules, function (element) {
                var rules = {},
                $element = $( element ),
                type = element.getAttribute( "type" ),
                method, value;
 
                for ( method in $.validator.methods ) {
 
                    // Support for <input required="" type="text" /> in both html5 and older browsers
                    if ( method === "required" ) {
                        value = element.getAttribute( method );
 
                        // Some browsers return an empty string for the required attribute
                        // and non-HTML5 browsers might have required="" markup
                        if ( value === "" ) {
                            value = true;
                        }
 
                        // Force non-HTML5 browsers to return bool
                        value = !!value;
                    } else {
                        value = $element.attr( method );
 
                        // CONVERT STRING TO BOOLEAN
                        if (value === 'true') {
                            value = true
                        }
                    }
 
                    this.normalizeAttributeRule( rules, type, method, value );
                }
 
                // 'maxlength' may be returned as -1, 2147483647 ( IE ) and 524288 ( safari ) for text inputs
                if ( rules.maxlength && /-1|2147483647|524288/.test( rules.maxlength ) ) {
                    delete rules.maxlength;
                }
 
                return rules;
            });
        })
 
        return $
    };
})

With the correct implementation of the mixin, the value is now properly rendered as boolean value.

And that’s it, as simple as that! 😀

Thanks for reading my article, hope you liked it! If you have any questions, feel free to leave a comment or contact us. We’d be glad to help!

Until next time! 🙂