Blog

A Complete Guide on Magento 2 Form Validation

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.

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
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:
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.

2 thoughts on “A Complete Guide on Magento 2 Form Validation

  1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

πŸš€ Let’s Connect on LinkedIn! πŸš€

Want to level up your skills and knowledge? πŸš€
Follow us on LinkedIn to get:
βœ… Expert insights on business growth
βœ… Daily tips to sharpen your skills
βœ… Exclusive updates from The Coach SMB

Let's grow together!

Select your currency
USD United States (US) dollar