Magento 2 Custom Attribute Validation Rule

In the development cycle of your e-commerce store, you will always face a wide range of data from your store customers and determining the validity of these customers data is a priority essential task for you. With the default Magento 2, you can quickly create a custom attribute validation rule to check for correct data input provided by the customer. Let’s explore how we can customize the validation rule through the below process shown in the tutorial.

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: Name of the validator
  • 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

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, we 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. Vaidation 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() &amp;&amp; $(form).validation('isValid')) {
                //true
            } else {
                //false
            }
        });

Magento 2 Validation Rules

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

Attribute Text of the error
requiredThis is a required field.
remotePlease fix this field.
emailPlease enter a valid email address.
urlPlease enter a valid URL.
datePlease enter a valid date.
dateISOPlease enter a valid date (ISO).
numberPlease enter a valid number.
digitsPlease enter only digits.
creditcardPlease enter a valid credit card number.
equalToPlease enter the same value again.
maxlengthPlease enter no more than {0} characters.
minlengthPlease enter at least {0} characters.
rangelengthPlease enter a value between {0} and {1} characters long.
rangePlease enter a value between {0} and {1}.
maxPlease enter a value less than or equal to {0}.
minPlease 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 NameText Of The Error
max-wordsPlease enter {0} words or less
min-wordsPlease enter at least {0} words
range-wordsPlease enter between {0} and {1} words
letters-with-basic-puncLetters or punctuation only please
alphanumericLetters, numbers, spaces or underscores only please
letters-onlyLetters only please
no-whitespaceNo white space please
zip-rangeYour ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx
integerA positive or negative non-decimal number please
vinUSThe specified vehicle identification number (VIN) is invalid
dateITAPlease enter a correct date
dateNLVul hier een geldige datum in
timePlease enter a valid time, between 00:00 and 23:59
time12hPlease enter a valid time, between 00:00 am and 12:00 pm
phoneUSPlease specify a valid phone number
phoneUKPlease specify a valid phone number
mobileUKPlease specify a valid mobile number
stripped-min-lengthPlease enter at least {0} characters
validate-no-utf8mb4-charactersPlease remove invalid characters: {0}
credit-card-typesPlease enter a valid credit card number
ipv4Please enter a valid IP v4 address
ipv6Please enter a valid IP v6 address
patternInvalid format
allow-container-classNamebool
validate-no-html-tagsHTML tags are not allowed
validate-selectPlease select an option
validate-no-emptyEmpty Value
validate-alphanum-with-spacesPlease use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field
validate-dataPlease 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-streetPlease use only letters (a-z or A-Z), numbers (0-9), spaces and “#” in this field
validate-phoneStricPlease enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-phoneLaxPlease enter a valid phone number. For example (123) 456-7890 or 123-456-7890
validate-faxPlease enter a valid fax number (Ex: 123-456-7890)
validate-emailPlease enter a valid email address (Ex: johndoe@domain.com)
validate-emailSenderPlease 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-passwordPlease enter 7 or more characters, using both numeric and alphabetic
validate-customer-passwordMinimum 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-urlPlease 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 http://www.example.com
validate-xml-identifierPlease enter a valid XML-identifier (Ex: something_1, block5, id-4)
validate-ssnPlease enter a valid social security number (Ex: 123-45-6789)
validate-zip-usPlease enter a valid zip code (Ex: 90602 or 90602-1234)
validate-date-auPlease use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006
validate-currency-dollarPlease enter a valid $ amount. For example $100.00
validate-not-negative-numberPlease enter a number 0 or greater in this field
validate-zero-or-greaterPlease enter a number 0 or greater in this field
validate-greater-than-zeroPlease enter a number greater than 0 in this field
validate-css-lengthPlease input a valid CSS-length (Ex: 100px, 77pt, 20em, .5ex or 50%)
validate-numberPlease enter a valid number in this field
required-numberPlease enter a valid number in this field
validate-number-rangeThe value is not within the specified range
validate-digitsPlease enter a valid number in this field
validate-digits-rangeThe value is not within the specified range
validate-rangeThe value is not within the specified range
validate-alphaPlease use letters only (a-z or A-Z) in this field
validate-codePlease use only letters (a-z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter
validate-alphanumPlease use only letters (a-z or A-Z) or numbers (0-9) in this field. No spaces or other characters are allowed
validate-datePlease enter a valid date
validate-date-rangeMake sure the To Date is later than or the same as the From Date
validate-cpasswordPlease make sure your passwords match
validate-identifierPlease enter a valid URL Key (Ex: “example-page”, “example-page.html” or “anotherlevel/example-page”)
validate-zip-internationalPlease enter a valid zip code
validate-one-requiredPlease select one of the options above
validate-statePlease select State/Province
required-filePlease select a file
validate-ajax-errorbool
validate-optional-datetimeThe field isn’t complete
validate-required-datetimeThis is a required field
validate-one-required-by-namePlease select one of the options
less-than-equals-toPlease enter a value less than or equal to %s
greater-than-equals-toPlease enter a value greater than or equal to %s
validate-emailsPlease enter valid email addresses, separated by commas. For example, johndoe@domain.com, johnsmith@domain.com
validate-cc-type-selectCard type does not match credit card number
validate-cc-numberPlease enter a valid credit card number
validate-cc-typeCredit card number does not match credit card type
validate-cc-expIncorrect credit card expiration date
validate-cc-cvnPlease enter a valid credit card verification number
validate-cc-ukssPlease enter issue number or start date for switch/solo card type
validate-lengthPlease enter less or equal than %1 symbols..replace(‘%1’, length);
Please enter more or equal than %1 symbols..replace(‘%1’, length)
required-entryThis is a required field
not-negative-amountPlease enter positive number in this field
validate-per-page-value-listPlease enter a valid value, ex: 10,20,30
validate-per-page-valuePlease enter a valid value from list
validate-new-passwordPlease enter 6 or more characters. Leading and trailing spaces will be ignored
required-if-not-specifiedThis is a required field
required-if-all-sku-empty-and-file-not-loadedPlease enter valid SKU key
required-if-specifiedThis is a required field
required-number-if-specifiedPlease enter a valid number
datetime-validationThis is required field
required-text-swatch-entryAdmin is a required field in each row
required-visual-swatch-entryAdmin is a required field in each row
required-dropdown-attribute-entryAdmin is a required field in each row
validate-item-quantityPlease 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

Leave a Reply