<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. Commented Jul 26, 2019 at 13:01
  • this issue solved or ? Commented Jul 29, 2019 at 13:09
  • hai @RohanHapani. this issue not solved Commented Jul 30, 2019 at 4:31
  • Is it working for you? @ShafeelSha Commented Jul 30, 2019 at 5:41

1 Answer 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

], function ($) {
    "use strict";

    return function () {
        var custom_text;
            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 Commented Jul 30, 2019 at 5:59
  • You must need to add mobile number like +911234567890 Commented Jul 30, 2019 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 ? Commented Jul 30, 2019 at 6:01
  • As I said, you need to override login.phtml file in your module/theme. Commented Jul 30, 2019 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 Commented Jul 30, 2019 at 6:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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