How to customize the validation rule in Magento 2

During the development process of your e-commerce store, you will receive a wide range of data from your customers. Determining the validity of this data is an essential task for you. With the support of the default Magento 2 tools , you can quickly create a custom attribute validation rule to check for correct input.

Let’s explore how to customize the validation rule through the below process:

Example Of Validation

Here is how validation looks on the registration page.

Magento 2 Custom Attribute Validation Rule image 1

How To Add Validation In Magento 2

Step 1: Connect Validator To The Form

To help the fields inside the form pass validation, you need to add the following attribute

<form /> tag:
        <form data-mage-init='{"validation":{}}' … >

Step 2: Insert Validation Rules To The Element Of The Form

You can use different ways to do this:

  • The first way: You can declare validation rules in the data-mage-init attribute
 <form data-mage-init='{
                "validation":{
                        "rules": {
                                "login": {
                                        "required":true
                                }
                        }
                }
        }' … >
  • The second way: You can insert the data-validate attibute into element
    <input type="text" data-validate='{"required":true}' name="login" id="login" ... />
    
  • The third way: The rule name can be used as an attribute
    <input type="text" required="true" name="login" id="login" ... />
    
  • The fourth way: The rule name can be used as a class
    <input type="text" class="input-text required" name="login" id="login" ... /><a id="step_2" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 16px;"></a>
    

How To Create A Validator At Magento 2 Module Level

Step 1: Make A New JS File With A Custom Validation Rule

In this step, you need to use the addMethod to add a new rule. There are two parameters:

  • The first parameter: The validator name
  • The second parameter: The function which has two possible values true or false. If the function shows false, the user gets a label with the error text, which should be shown in the third parameter.

Step 2: Connect The Validator

According to your goals, you can connect the validator in different ways.

2.1. Access The JS In The Layouts Where Should Be Used The Validator

<link src="Vendor_Module::js/validation.js"/>

After creating the validator, add it to the required element.

2.2. In The Requirejs-config.js File, Register The JS File

After registering the JS file, you need to create the requirejs-config.js file.

For example:

 app/code/<Vendor>/<Module>/view/frontend/requirejs-config.js.
        var config = {
           map: {
               "*": {
                   myValidation: "<Vendor_Module>/js/validation"
               }
           }
        };

Connect the validator in the phtml file:

  <script type="text/x-magento-init">
           {
               "*": {
                   "myValidation": {}
               }
           }
        </script>

You can add the created validator to the required element.

2.3. Validation Check In Custom JS

In case you want to perform some other actions besides the validation check, you can determine the form validation in the Js file:

 $('#btn').on('click', function() {
            var form = '#form';
            if ($(form).validation() && $(form).validation('isValid')) {
                //true
            } else {
                //false
            }
        });
        

Note: There are a large number of out-of-the-box validators in Magento, so before creating your validator, you need to check whether it has been created before you or not.

Magento 2 Validation Rules

The below table shows a list of validation rules for the latest Magento version. There are two columns in this table. The first column shows attribute names, and the second column contains the text of the error.

JQuery Rules

Please access the lib/web/jquery/jquery.validate.js file to view a list of rules, as below:

Attribute Name Text Of The Error
required This is a required field.
remote Please fix this field.
email Please enter a valid email address.
url Please enter a valid URL.
date Please enter a valid date.
dateISO Please enter a valid date (ISO).
number Please enter a valid number.
digits Please enter only digits.
creditcard Please enter a valid credit card number.
equalTo Please enter the same value again.
maxlength Please enter no more than {0} characters.
minlength Please enter at least {0} characters.
rangelength Please enter a value between {0} and {1} characters long.
range Please enter a value between {0} and {1}.
max Please enter a value less than or equal to {0}.
min Please enter a value greater than or equal to {0}.

Magento Rules

Please access the lib/web/mage/validation.js file to view a list of rules, as below:

Attribute Name Text Of The Error
max-words Please enter {0} words or less
min-words Please enter at least {0} words
range-words Please enter between {0} and {1} words
letters-with-basic-punc Letters or punctuation only please
alphanumeric Letters, numbers, spaces or underscores only please
letters-only Letters only please
no-whitespace No white space please
zip-range Your ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx
integer A positive or negative non-decimal number please
vinUS The specified vehicle identification number (VIN) is invalid
dateITA Please enter a correct date
dateNL Vul hier een geldige datum in
time Please enter a valid time, between 00:00 and 23:59
time12h Please enter a valid time, between 00:00 am and 12:00 pm
phoneUS Please specify a valid phone number
phoneUK Please specify a valid phone number
mobileUK Please specify a valid mobile number
stripped-min-length Please enter at least {0} characters
validate-no-utf8mb4-characters Please remove invalid characters: {0}
credit-card-types Please enter a valid credit card number
ipv4 Please enter a valid IP v4 address
ipv6 Please enter a valid IP v6 address
pattern Invalid format
allow-container-className bool
validate-no-html-tags HTML tags are not allowed
validate-select Please select an option
validate-no-empty Empty Value
validate-alphanum-with-spaces Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field
validate-data Please use only letters (a-z or A-Z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter
validate-street Please use only letters (a-z or A-Z), numbers (0-9), spaces and “#” in this field
validate-phoneStrict Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-phoneLax Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-fax Please enter a valid fax number (Ex: 123-456-7890)
validate-email Please enter a valid email address (Ex: johndoe@domain.com)
validate-emailSender Please enter a valid email address (Ex: johndoe@domain.com)
validate-password Please enter 6 or more characters. Leading and trailing spaces will be ignored
validate-admin-password Please enter 7 or more characters, using both numeric and alphabetic
validate-customer-password Minimum length of this field must be equal or greater than %1 symbols. Leading and trailing spaces will be ignored.
  Minimum of different classes of characters in password is %1. Classes of characters: Lower Case, Upper Case, Digits, Special Characters
validate-url Please enter a valid URL. Protocol is required (http://, https:// or ftp://)
validate-clean-url Please enter a valid URL. For example http://www.example.com or www.example.com
validate-xml-identifier Please enter a valid XML-identifier (Ex: something_1, block5, id-4)
validate-ssn Please enter a valid social security number (Ex: 123-45-6789)
validate-zip-us Please enter a valid zip code (Ex: 90602 or 90602-1234)
validate-date-au Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006
validate-currency-dollar Please enter a valid $ amount. For example $100.00
validate-not-negative-number Please enter a number 0 or greater in this field
validate-zero-or-greater Please enter a number 0 or greater in this field
validate-greater-than-zero Please enter a number greater than 0 in this field
validate-css-length Please input a valid CSS-length (Ex: 100px, 77pt, 20em, .5ex or 50%)
validate-number Please enter a valid number in this field
required-number Please enter a valid number in this field
validate-number-range The value is not within the specified range
validate-digits Please enter a valid number in this field
validate-digits-range The value is not within the specified range
validate-range The value is not within the specified range
validate-alpha Please use letters only (a-z or A-Z) in this field
validate-code Please use only letters (a-z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter
validate-alphanum Please use only letters (a-z or A-Z) or numbers (0-9) in this field. No spaces or other characters are allowed
validate-date Please enter a valid date
validate-date-range Make sure the To Date is later than or the same as the From Date
validate-cpassword Please make sure your passwords match
validate-identifier Please enter a valid URL Key (Ex: “example-page”, “example-page.html” or “anotherlevel/example-page”)
validate-zip-international Please enter a valid zip code
validate-one-required Please select one of the options above
validate-state Please select State/Province
required-file Please select a file
validate-ajax-error bool
validate-optional-datetime The field isn’t complete
validate-required-datetime This is a required field
validate-one-required-by-name Please select one of the options
less-than-equals-to Please enter a value less than or equal to %s
greater-than-equals-to Please enter a value greater than or equal to %s
validate-emails Please enter valid email addresses, separated by commas. For example, johndoe@domain.com, johnsmith@domain.com
validate-cc-type-select Card type does not match credit card number
validate-cc-number Please enter a valid credit card number
validate-cc-type Credit card number does not match credit card type
validate-cc-exp Incorrect credit card expiration date
validate-cc-cvn Please enter a valid credit card verification number
validate-cc-ukss Please enter issue number or start date for switch/solo card type
validate-length Please enter less or equal than %1 symbols..replace(‘%1’, length);
Please enter more or equal than %1 symbols..replace(‘%1’, length)  
required-entry This is a required field
not-negative-amount Please enter positive number in this field
validate-per-page-value-list Please enter a valid value, ex: 10,20,30
validate-per-page-value Please enter a valid value from list
validate-new-password Please enter 6 or more characters. Leading and trailing spaces will be ignored
required-if-not-specified This is a required field
required-if-all-sku-empty-and-file-not-loaded Please enter valid SKU key
required-if-specified This is a required field
required-number-if-specified Please enter a valid number
datetime-validation This is required field
required-text-swatch-entry Admin is a required field in each row
required-visual-swatch-entry Admin is a required field in each row
required-dropdown-attribute-entry Admin is a required field in each row
validate-item-quantity Please enter a quantity greater than 0;
  The fewest you may purchase is %1;
  The maximum you may purchase is %1;
  You can buy this product only in quantities of %1 at a time
password-not-equal-to-user-name password-not-equal-to-user-nam

Conclusions

That’s all! I’ve provided you he detailed instructions for adding custom validation rule in Magento 2. Hopefully, this article is useful to you. If you have any questions or want to add something, please let me know by commenting below.

Image Description
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
x