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:
- How To Add Validation In Magento 2
- How To Create A Validator At Magento 2 Module Level
- Magento 2 Validation Rules
Example Of Validation
Here is how validation looks on the registration page.
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. |
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.
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid