Client side mobile validation in magento2

Question

I added one field of mobile number in customer/account/create form. I want to put validation in mobile field which allow 10 digit mobile number format . If mobile number format is not valid then display error message as per email id validation.

As per mention in image i want to display error message for mobile number validation.

How to apply client side validation for mobile number?

Please help me...

Thanks in advance :)

Answer 1

In Magento the validation is done through validation.js

lib/web/mage/validation.js

In this file you will find a number of validation functions.

Now lets see how you can apply validation to your field. Lets take an example of postcode field. If you look at the code in checkout_index_index.xml you will see there is a node called validation. You can add multiple validation this way like I have added alphanumeric.

 <item name="postcode" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
        <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="string">true</item>
            <item name="alphanumeric" xsi:type="string">true</item>
        </item>
    </item>
</item>

Function is defined in validation.js like this.

"alphanumeric": [
            function (value, element) {
                return this.optional(element) || /^\w+$/i.test(value);
            },
            'Letters, numbers, spaces or underscores only please'
        ],

Hope this helps!

UPDATE: Add your custom function in this file:

app/code/[Vendor]/[ThemName]/Magento_Ui/web/js/lib/validation/rules.js

like this

mobilelimitdigit": [
        function(value) {
            return value.length > 9 &&  value.length < 11 
            && value.match(/^\d{10}$/);
        },
        $.mage.__('Please specify a valid 10 digits mobile number')
    ],