Magento – How to add custom validation rules in Magento-2

magento-2.1validation

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

Best Answer

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>
Related Topic