Validate a custom form in Magento 2

This article will cover the fundamentals of validating any form in Magento 2.

The contact form on Contact us page will be used and modified for the purpose of the article. The form itself can be found in the following paths, depending on the type of installation you are using:

app/code/Magento/Contact/view/frontend/templates/form.phtml
vendor/magento/module-contact/view/frontend/templates/form.phtml

In order to demonstrate how to get the forms to be validated, let’s create a validation-free form with some fields. Copy the file from one of the paths above and paste it into your theme:

app/code/VENDOR/THEME/Magento_Contact/frontend/templates/form.phtml

Next, paste the following code inside of it:

<form class="form contact-inchoo" action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>" id="contact-form" method="post" data-hasrequired="* Required Fields">
<fieldset class="fieldset">
<div class="field name required">
<label class="label" for="field1"><span>Field 1 (using data-validate)</span></label>
<div class="control">
<input name="field1" id="field1" title="Field 1" value="" class="input-text" type="text" />
</div>
</div>
<div class="field name required">
<label class="label" for="field2"><span>Field 2 (using attribute)</span></label>
<div class="control">
<input name="field2" id="field2" title="Field 2" value="" class="input-text" type="text" />
</div>
</div>
<div class="field name required">
<label class="label" for="field3"><span>Field 3 (using classname)</span></label>
<div class="control">
<input name="field3" id="field3" title="Field 2" value="" type="text" class="input-text" />
</div>
</div>
<div class="field name required">
<label class="label" for="field4"><span>Field 4 (using data-mage-init)</span></label>
<div class="control">
<input name="field4" id="field4" title="Field 4" value="" class="input-text" type="text" />
</div>
</div>
<?php echo $block->getChildHtml('form.additional.info'); ?>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<input type="hidden" name="hideit" id="hideit" value="" />
<button type="submit" title="Submit" class="action submit primary">
<span>Submit</span>
</button>
</div>
</div>
</form>

Your form should look like this one:

If you click the “Submit” button, the form would be submitted.

Step 1: add the validation component

Add this attribute on the form tag:

data-mage-init='{"validation":{}}'

This one data 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: add some validation rules to your input fields

By looking at the code of validation logic, Magento made it possible to set validation rule names by using one of the following methods listed here:

method #1 – by setting data-validate attribute on the input field:

<input data-validate='{"required":true}'name="field1" id="field1" ... />

method #2 – by setting the rule names as attributes:

<input required="true" name="field2" id="field2" ... />

method #3 – by setting the rule names as classnames:

<input class="input-text required" name="field3" id="field3" ... />

method #4 – by setting the rules inside of the data-mage-init attribute on the form tag

<form ... data-mage-init='{
"validation":{
"rules": {
"field4": {
"required":true
}
}
}
}'>

Now when you submit your form, all of the fields should be invalid, like on the image:

Rules with arguments

If you have to use a rule that requires a parameter (for example, minlength, maxlength and many other) you can use one of the following three methods, which ever you prefer:

method #1

data-validate='{
"required":true,
"minlength":10
}'

method #2
```
required="true" minlength="15"
```
method #4 – you have to manually specify name attribute of each input field which rules are applied (which is already taken care of if you use it inline with data-validate attribute)
```
data-mage-init='{
"validation":{
"rules": {
"field4": {
"required":true,
"minlength":20
}
}
}
}'
```

List of form validation rules

To wrap up this article, a list of validation rule names is provided here as a quick reference toward the official documentation:

jQuery rules:
1. required,
2. remote,
3. email,
4. url,
5. date,
6. dateISO,
7. number,
8. digits,
9. creditcard,
10. equalTo,
11. maxlength,
12. minlength,
13. rangelength,
14. range,
15. max,
16. min
Magento rules:
1. max-words
2. min-words
3. range-words
4. letters-with-basic-punc
5. alphanumeric
6. letters-only
7. no-whitespace
8. zip-range
9. integer
10. vinUS
11. dateITA
12. dateNL
13. time
14. time12h
15. phoneUS
16. phoneUK
17. mobileUK
18. stripped-min-length
19. email2
20. url2
21. credit-card-types
22. ipv4
23. ipv6
24. pattern
25. allow-container-className
26. validate-no-html-tags
27. validate-select
28. validate-no-empty
29. validate-alphanum-with-spaces
30. validate-data
31. validate-street
32. validate-phoneStrict
33. validate-phoneLax
34. validate-fax
35. validate-email
36. validate-emailSender
37. validate-password
38. validate-admin-password
39. validate-customer-password
40. validate-url
41. validate-clean-url
42. validate-xml-identifier
43. validate-ssn
44. validate-zip-us
45. validate-date-au
46. validate-currency-dollar
47. validate-not-negative-number
48. validate-zero-or-greater
49. validate-greater-than-zero
50. validate-css-length
51. validate-number
52. required-number
53. validate-number-range
54. validate-digits
55. validate-digits-range
56. validate-range
57. validate-alpha
58. validate-code
59. validate-alphanum
60. validate-date
61. validate-date-range
62. validate-cpassword
63. validate-identifier
64. validate-zip-international
65. validate-one-required
66. validate-state
67. required-file
68. validate-ajax-error
69. validate-optional-datetime
70. validate-required-datetime
71. validate-one-required-by-name
72. less-than-equals-to
73. greater-than-equals-to
74. validate-emails
75. validate-cc-type-select
76. validate-cc-number
77. validate-cc-type
78. validate-cc-exp
79. validate-cc-cvn
80. validate-cc-ukss
81. validate-length
82. required-entry
83. not-negative-amount
84. validate-per-page-value-list
85. validate-per-page-value
86. validate-new-password
87. required-if-not-specified
88. required-if-all-sku-empty-and-file-not-loaded
89. required-if-specified
90. required-number-if-specified
91. datetime-validation
92. required-text-swatch-entry
93. required-visual-swatch-entry
94. required-dropdown-attribute-entry
95. Validate-item-quantity
96. validate-grouped-qty
97. validate-one-checkbox-required-by-name
98. validate-date-between
99. validate-dob