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:
RulesDescription
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:
RulesDescription
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-phoneStrictPlease 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-passwordPlease 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-urlPlease enter a valid URL. For example http://www.example.com or 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-namepassword-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.

Related Posts:

Comments (2)