1

I have written rule.js file in following path.

app/design/frontend/package/theme/Magento_Ui/web/js/lib/validation/rule.js

add following code in rule.js

"mobiletendigit": [
        function(value) {
            return value.length > 9 &&  value.length < 11 
            && value.match(/^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[789]\d{9}|(\d[ -]?){10}\d$/);
        },
        $.mage.__('Please specify a valid 10 digits mobile number')
        ]

add mobiletendigit class to input field.

<input type="text" name="telephone" value="<?php echo $block->escapeHtml($block->getAddress()->getTelephone()) ?>" title="<?php /* @escapeNotVerified */ echo __('Phone Number') ?>" class="input-text required-entry mobiletendigit validate-digits <?php /* @escapeNotVerified */ echo $this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('telephone') ?>" id="telephone" data-validate="{required:true, 'mobiletendigit':true}">

add following tag to form.

data-mage-init='{"validation":{}}'
2

Use like below code...

1) In input or select tag add our validaion with this code

data-validate="{required:true, 'validate-custom-name':true}"

2) Add js validation for “Validate-custom-name”

validation script

<script type="text/javascript">
require([
'jquery', // jquery Library
'jquery/ui', // Jquery UI Library
'jquery/validate', // Jquery Validation Library
'mage/translate' // Magento text translate (Validation message translte as per language)
], function($){ 
$.validator.addMethod(
'validate-custom-name', function (value) { 
return (value !== 'test'); // Validation logic here
}, $.mage.__('Enter Valid name'));

});
</script>
  • hi kisan, validate-custom-name should be validate-mobiletendigit... – Sarvesh Tiwari Feb 16 '18 at 11:30
  • Yes. But it is just for example. You can use your own. – Kishan Patadia Feb 16 '18 at 11:39
  • <script type="text/javascript"> require([ 'jquery', // jquery Library 'jquery/ui', // Jquery UI Library 'jquery/validate', // Jquery Validation Library 'mage/translate' // Magento text translate (Validation message translte as per language) ], function($){ $.validator.addMethod( 'validate-mobiletendigit', function (value) { return (value !== '7715878743'); // Validation logic here }, $.mage.__('Enter Valid name')); }); </script> i am using this but not working – Sarvesh Tiwari Feb 16 '18 at 11:54
2
  1. Define this Js Code in view file :

    <script type="text/javascript">
      require([
      'jquery',
      'jquery/ui',
      'jquery/validate',
      'mage/translate'
      ], function($){ 
      $.validator.addMethod(
      'mobile-number-validation', function (value) { 
          var re = /^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[789]\d{9}|(\d[ -]?){10}\d$/;
          return !re.test(value);
    
      }, $.mage.__('Please specify a valid 10 digits mobile number.'));
      }); 
    </script>
    
  2. Now Just Add Validation Class in input field .

    <input type="text" class="mobile-number-validation" name="telephone" data-validate="{required:true}"/>
    
  • hi Sujeet its working but every time displaying wrong message – Sarvesh Tiwari Feb 16 '18 at 12:12
  • hi sujeet i want to add this on rule.js – Sarvesh Tiwari Feb 16 '18 at 12:16
  • @ErSarveshVTiwari what message it is showing ? Or May be check the pattern is correct OR not for 10 digits mobile number? – Sujeet Pandit Feb 17 '18 at 5:12
  • its working fine. i am looking its validation for knockout js page – Sarvesh Tiwari Feb 18 '18 at 6:53
1

It could help someone !

Un exemple for à phone number who contains exactly 10 digits and begin with 06 or 07 :

Field :

<input type="phone" name="phone" id="phone" value="<?= $block->escapeHtmlAttr($block->getFormData()->getPhone()) ?>" title="<?= $block->escapeHtmlAttr(__('Phone')) ?>" class="input-text" data-validate="{required:true, 'validate-mobilePhoneNumber':true}">

Js condition:

<script type="text/javascript">
    require([
        'jquery', 'jquery/ui', 'jquery/validate', 'mage/translate', 'mage/mage'
    ], function($){
        $.validator.addMethod(
            'validate-mobilePhoneNumber', function (value) {
                return /^0(6|7)[0-9]{8}$/.test(value);
            }, $.mage.__('Please enter a mobile phone number. Ex 06******** ou 07********.'));

    });
</script>

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.