How to add custom validation rules in Magento-2

Question

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":{}}'

Answer 1

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>

• Sarvesh Tiwari: hi kisan, validate-custom-name should be validate-mobiletendigit...
• Kishan Patadia: Yes. But it is just for example. You can use your own.
• Sarvesh Tiwari: <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

Answer 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}"/>
   

• Sarvesh Tiwari: hi Sujeet its working but every time displaying wrong message
• Sarvesh Tiwari: hi sujeet i want to add this on rule.js
• Sujeet Pandit: @ErSarveshVTiwari what message it is showing ? Or May be check the pattern is correct OR not for 10 digits mobile number?
• Sarvesh Tiwari: its working fine. i am looking its validation for knockout js page

Answer 3

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>