Table of Contents
In this tutoril, we are going to learn about the Magento2 Form Validation.
Validating forms in Magento 2 is very important because it helps to make sure you donβt receive any spam/malicious submissions and the information provided by users is properly formatted.
Form validation Files
In Magento, there are three main modules for form validation that are based on and extendΒ jQuery validation.
-
/lib/web/jquery/jquery.validate.js
: the base jQuery validation/lib/web/mage/validation.js
: includes the base jQuery validation and addition functions such as theΒ$.validator.addMethod
Β which can be used to add custom validation rules/lib/web/mage/validation/validation.js
: includesΒmage/validation.js
Β and adds a few more rules to the validator
How to Validate form in Magento2
Below is the step-by-step process on how to validate forms in Magento 2.
Step 1: Initiate validations
There are two ways you can use to initiate form validation:
1. Using the data-mage-init
Β attribute
<form id="my-form" data-mage-init='{"validation": {}}'> ... </form>
2. Using the text/x-magento-init
Β script type tag
<script type="text/x-magento-init"> { "#my-form": { "validation": {} } } </script>
This attribute tells Magento that the form must be validated before submit and that Β validation
Β alias should invoke some particular file using RequireJS.
If you take a look at the page source of the compiled file RequireJS config file (found inΒ pub/static/frontend/VENDOR/THEME/LOCALE/requirejs-config.json
), you should be able to find the following snippet:
var config = {
map: {
"*": {
...
"validation": "mage/validation/validation",
...
}
}
...
};
The stringΒ on the right of theΒ validation
Β alias matches theΒ lib/web/mage/validation/validation.js
Β file that will load entire validation logic and take care of your input fields.
Step 2:Β Defining validation rules
There are couple of ways to define validation rules for a form field.
Method 1:
Use rule name as an attribute
<input required="true" name="field" type="text" />
Use rule name as an attribute with arguments
<input id="field-1" ... required="true" minlength="15"/>
Method 2:
Use rule name as class name
<input class="input-text required" name="field" type="text" />
class name with arguments
<input id="field-1" ... class="input-text required-entry" minlength="15"/>
Method 3:
UseΒ βdata-validateβ attribute
<input data-validate='{"required":true}' name="field" type="text" />
data-validate
Β attribute with arguments
<input id="field-1" ... data-validate='{"required":true, "minlength":10}'/>
Method 4:
Set rule in data-mage-init attribute of form tag
<form class="form my-form" action="" method="post" data-mage-init='{ "validation":{ "rules": { "fieldname": { "required":true } } } }'>
Set rule in data-mage-init attributeΒ with argumentsΒ of form tagΒ
<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true, "minlength":20}}}}'>
...
</form>
You can check these all validation logic in the file: validation.js
Here is list of validations classes rules supported by magento 2. You just need to add css class for the rule to apply.
jQuery rules:
By default, available rules in Magento are stored inΒ /validation/rules.js
Β A set of standard validation methods is provided:
jQuery rules: | |
---|---|
Rules | Description |
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: | |
---|---|
Rules | Description |
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 |
How to Create custom rules in Magento2
We can create custom rules by creating a JavaScript mixin for the mage/validation
Β module and calling theΒ $.validator.addMethod
, like so:
Syntax
$.validator.addMethod( 'rule-name', function(value, element) { // Return true or false after validation rule check }, $.mage.__('Error message to display if validation fails') )
See the below example:
Requirement: – Create Validation to check an input field has only five words
Please follow the following steps to implement this functionality
Step 1: Mention Validation MixinΒ
In the requirejs-config.js file, add below code which will add a validation rule to the mixin to check if an input field has only five words.
app/code/Vendor/Module/view/frontend/requirejs-config.js
var config = { Β Β Β config: { Β Β Β Β Β Β mixins: { Β Β Β Β Β Β Β Β Β 'mage/validation': { Β Β Β Β Β Β Β Β Β Β Β Β 'Vendor_Module/js/validation-mixin': true Β Β Β Β Β Β Β Β } Β Β Β Β } Β } }
Step 2: Add a validation rule
Add the validation rule, so now in app/code/Vendor/Module/view/frontend/web/js/validation-mixin.js, add below code
define(['jquery'], function($) { 'use strict'; return function() { $.validator.addMethod( 'validate-five-words', function(value, element) { return value.split(' ').length == 5; }, $.mage.__('Please enter exactly five words') ) } });
After this,
Step 3:Β Add validation class in the input field
add validate-five-words in the input field as class name
<input name="title" id="title" title="title" value="" class="input-text validate-five-words" type="text" >
Step 4: Apply the Changes
Then remove folders present inside pub/static/frontend and var/view_preprocessed and run the below command to see your validation working –
php bin/magento se:s:d -f && php bin/magento c:f
Add More Validations:
You can add more validations also in app/code/Vendor/Module/view/frontend/web/js/validation-mixin.js like this:-
define(['jquery'], function($) { 'use strict'; return function() { $.validator.addMethod( 'validate-five-words', function(value, element) { return value.split(' ').length == 5; }, $.mage.__('Please enter exactly five words') ), $.validator.addMethod( 'validate-seven-length', function(value, element) { return value.length == 7; }, $.mage.__('Please enter exactly 7 letters') ), $.validator.addMethod( 'validate-email-abc', function(value, element) { return value.search('@abc.com') != -1; }, $.mage.__('Please enter @abc.com') ) } });
Conclusion
In this article, we have learnt about the where are the validation mentioned, what are the ways to create validation, how to create validations and also how to create custom rules for validation on the form in Magento2.
Feel free to post comments, I will definitely read.
Hello and thanks for your very helpful article! When adding a custom field validation the according rule is triggered immediately when starting to type anthing into the field. Is there a way to trigger the validation after leaving the field or after submitting the form? For example:
In checkout shipping step I want the STREET field to be checked for a number (to make sure the field contains the street name as well as the house number). Currently, when entering the first letter into this field the message “Please enter a house number” appears. This does not really make sense. The message shall appear after leaving the field without having entered a number, or after clicking on the button to the next checkout step.
Is there a way to achieve this? Any hint would be very welcome. Thanks a lot!
Regards,
Alex
Hello Alex,
Follow this.
and the newly created rule in the class of input field, also make sure data-mage-init is also there in form. You can take reference of contact us form.
Thanks,
Sonal