0
  <input type="text" class="input-email-mobile " id="customer-email-mobile">

I need to validate Mobile number or email in the above text box using magento validation.! maybe the user enter mobile number or email in the same input data-validate="{required:true,'validate-email':true,'validate-number':true}this code only validate email. how can i achieve both in a text box using magento validation In Checkout Shipping Address page ??

  • if you take a look here github.com/magento/magento2/blob/2.3/lib/web/mage/… you will see the email validation checks for @domain.com structure. As telephone would never contain this you are going to fail this validation but will be entering a perfectly valid telephone number. In short I don't think it can be done. – Dominic Xigen Jul 26 at 13:01
  • this issue solved or ? – Rohan Hapani Jul 29 at 13:09
  • hai @RohanHapani. this issue not solved – Shafeel Sha Jul 30 at 4:31
  • Is it working for you? @ShafeelSha – Rohan Hapani Jul 30 at 5:41
1

Magento 2 uses validation.js file for apply validations which is located at lib/web/mage directory of Magento 2.

In Magento 2, it's not by default provide rule which validate mobile number and email ID validate in textbox.

So, Need to create new rule to extend validation.js using mixin.

1) create requirejs-config.js at app/code/RH/CustomValidation/view/frontend/

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'RH_CustomValidation/js/validation-mixin': true
            }
        }
    }
}

2) Now, Add the JS validation class using the mixin at app/code/RH/CustomValidation/view/frontend/web/js/validation-mixin.js

define([
    'jquery'
], function ($) {
    "use strict";

    return function () {
        var custom_text;
        $.validator.addMethod(
            'validate-custom-mob-email-rule',
            function (value) {
                var mob_regex = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
                var email_regex = /^([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*@([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*\.(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]){2,})$/;
                if (!$.mage.isEmptyNoTrim(value))
                {
                    if(email_regex.test(value) && !mob_regex.test(value)){
                        return true;
                    } else if(mob_regex.test(value) && !email_regex.test(value)){
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return false;
                }
            },
            $.mage.__('Your validation error message')
        );
    }
});

3) Now, change class name in login.phtml file. Find "Email" Text field. Then, change field type email to text and replace validate-email validation with validate-custom-mob-email-rule new validation.

Now, upgrade, deploy and clean cache.

Cheers :)

  • hai @Rohan Hapani , now its working only in email validation – Shafeel Sha Jul 30 at 5:59
  • You must need to add mobile number like +911234567890 – Rohan Hapani Jul 30 at 5:59
  • already trying but no changes , after upgrade my project the validation fields shows data-validate="{required:true, 'validate-email':true}" my custom rule not visible here and all input attributes related to email ? – Shafeel Sha Jul 30 at 6:01
  • As I said, you need to override login.phtml file in your module/theme. – Rohan Hapani Jul 30 at 6:08
  • yes sir , already i'm using my custom module and .html file here is my file path app/code/Vendor/Module/view/frontend/web/template/form/element/email.html – Shafeel Sha Jul 30 at 6:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.