- \n
app\/code\/Magento\/Contact\/view\/frontend\/templates\/form.phtml<\/code><\/li>\nvendor\/magento\/module-contact\/view\/frontend\/templates\/form.phtml<\/code><\/li>\n<\/ul>\nIn order to demonstrate how to get the forms to be validated, let\u2019s create a validation-free form with some fields. Copy the file from one of the paths above and paste it into your theme:<\/span><\/p>\n
- \n
app\/code\/VENDOR\/THEME\/Magento_Contact\/frontend\/templates\/form.phtml<\/code><\/li>\n<\/ul>\nNext, paste the following code inside of it:<\/p>\n
<form class=\"form contact-sushil\" action=\"<?php<\/span> \/* @escapeNotVerified *\/<\/span> echo<\/span> $block<\/span>-><\/span>getFormAction<\/span>(<\/span>)<\/span>;<\/span> ?><\/span>\" 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<\/span> echo<\/span> $block<\/span>-><\/span>getChildHtml<\/span>(<\/span>'form.additional.info'<\/span>)<\/span>;<\/span> ?><\/span> <\/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>\r\n<\/form><\/code><\/pre>\nYour form should look like this one:<\/p>\n
![\"\"](\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/validate-a-custom-form-in-magento-2.png\")
<\/p>\nIf you click the \u201cSubmit\u201d button, the form would be submitted.<\/span><\/p>\n
Step 1: add the validation component<\/span><\/h2>\n
Add this attribute on the form tag:<\/span><\/p>\n
data-mage-init='{\"validation\":{}}'<\/code><\/span><\/p>\nThis one data attribute tells Magento that the form must be validated before submit and that \u00a0<\/span>
validation<\/code><\/span> 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 <\/span>pub\/static\/frontend\/VENDOR\/THEME\/LOCALE\/requirejs-config.json<\/code><\/span>), you should be able to find the following snippet:<\/span><\/p>\nvar<\/span> config =<\/span> {<\/span> map:<\/span> {<\/span> \"*\"<\/span>:<\/span> {<\/span> ... \"validation\"<\/span>:<\/span> \"mage\/validation\/validation\"<\/span>,<\/span> ... }<\/span> }<\/span> ...\r\n}<\/span>;<\/span><\/code><\/pre>\nThe string\u00a0on the right of the
validation<\/code> alias matches thelib\/web\/mage\/validation\/validation.js<\/code> file that will load entire validation logic and take care of your input fields.<\/p>\nStep 2: add some validation rules to your input fields<\/span><\/h2>\n
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:<\/span><\/p>\n
- \n
- method #1 \u2013 by setting
data-validate<\/code> attribute on the input field:\n<<\/span>input data-<\/span>validate=<\/span>'{\"required\":true}'<\/span>name=<\/span>\"field1\"<\/span> id=<\/span>\"field1\"<\/span> ...<\/span> \/><\/span><\/code><\/pre>\n<\/li>\n- method #2 \u2013 by setting the rule names as attributes:\n
<<\/span>input required=<\/span>\"true\"<\/span> name=<\/span>\"field2\"<\/span> id=<\/span>\"field2\"<\/span> ...<\/span> \/><\/span><\/code><\/pre>\n<\/li>\n- method #3 \u2013 by setting the rule names as classnames:\n
<<\/span>input class<\/span>=<\/span>\"input-text required\"<\/span> name=<\/span>\"field3\"<\/span> id=<\/span>\"field3\"<\/span> ...<\/span> \/><\/span><\/code><\/pre>\n<\/li>\n- method #4 \u2013 by setting the rules inside of the data-mage-init attribute on the form tag\n
<<\/span>form ...<\/span> data-<\/span>mage-<\/span>init=<\/span>'{ \"validation\":{ \"rules\": { \"field4\": { \"required\":true } } }\r\n}'<\/span>><\/span><\/code><\/pre>\n<\/li>\n<\/ol>\nNow when you submit your form, all of the fields should be invalid, like on the image:<\/p>\n
![\"\"](\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/validate-a-custom-form-in-magento-2-1.png\")
<\/p>\nRules with arguments<\/h2>\n
If you have to use a rule that requires a parameter (for example, <\/span>minlength<\/span>, <\/span>maxlength<\/span> and many other) you can use one of the following three methods, which ever you prefer:<\/span><\/p>\n
- \n
- method #1\n
data-<\/span>validate=<\/span>'{ \"required\":true, \"minlength\":10\r\n}'<\/span><\/code><\/pre>\n<\/li>\n- method #2\n
required=<\/span>\"true\"<\/span> minlength=<\/span>\"15\"<\/span><\/code><\/pre>\n<\/li>\n- method #4 \u2013\u00a0you 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 <\/span>data-validate <\/span>attribute)<\/span>\n
data-<\/span>mage-<\/span>init=<\/span>'{ \"validation\":{ \"rules\": { \"field4\": { \"required\":true, \"minlength\":20 } } }\r\n}'<\/span><\/code><\/pre>\n<\/li>\n<\/ul>\n![\"\"](\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/validate-a-custom-form-in-magento-2-2.png\")
<\/h2>\nList of form validation rules<\/h2>\n
To wrap up this article, a list of validation rule names is\u00a0provided here as a quick reference toward the official documentation:<\/p>\n
- \n
- jQuery rules:\n
- \n
- required,<\/li>\n
- remote,<\/li>\n
- email,<\/li>\n
- url,<\/li>\n
- date,<\/li>\n
- dateISO,<\/li>\n
- number,<\/li>\n
- digits,<\/li>\n
- creditcard,<\/li>\n
- equalTo,<\/li>\n
- maxlength,<\/li>\n
- minlength,<\/li>\n
- rangelength,<\/li>\n
- range,<\/li>\n
- max,<\/li>\n
- min<\/li>\n<\/ol>\n<\/li>\n
- Magento rules:\n
- \n
- max-words<\/span><\/li>\n
- min-words<\/span><\/li>\n
- range-words<\/span><\/li>\n
- letters-with-basic-punc<\/span><\/li>\n
- alphanumeric<\/span><\/li>\n
- letters-only<\/span><\/li>\n
- no-whitespace<\/span><\/li>\n
- zip-range<\/span><\/li>\n
- integer<\/span><\/li>\n
- vinUS<\/span><\/li>\n
- dateITA<\/span><\/li>\n
- dateNL<\/span><\/li>\n
- time<\/span><\/li>\n
- time12h<\/span><\/li>\n
- phoneUS<\/span><\/li>\n
- phoneUK<\/span><\/li>\n
- mobileUK<\/span><\/li>\n
- stripped-min-length<\/span><\/li>\n
- email2<\/span><\/li>\n
- url2<\/span><\/li>\n
- credit-card-types<\/span><\/li>\n
- ipv4<\/span><\/li>\n
- ipv6<\/span><\/li>\n
- pattern<\/span><\/li>\n
- allow-container-className<\/span><\/li>\n
- validate-no-html-tags<\/span><\/li>\n
- validate-select<\/span><\/li>\n
- validate-no-empty<\/span><\/li>\n
- validate-alphanum-with-spaces<\/span><\/li>\n
- validate-data<\/span><\/li>\n
- validate-street<\/span><\/li>\n
- validate-phoneStrict<\/span><\/li>\n
- validate-phoneLax<\/span><\/li>\n
- validate-fax<\/span><\/li>\n
- validate-email<\/span><\/li>\n
- validate-emailSender<\/span><\/li>\n
- validate-password<\/span><\/li>\n
- validate-admin-password<\/span><\/li>\n
- validate-customer-password<\/span><\/li>\n
- validate-url<\/span><\/li>\n
- validate-clean-url<\/span><\/li>\n
- validate-xml-identifier<\/span><\/li>\n
- validate-ssn<\/span><\/li>\n
- validate-zip-us<\/span><\/li>\n
- validate-date-au<\/span><\/li>\n
- validate-currency-dollar<\/span><\/li>\n
- min-words<\/span><\/li>\n
- max-words<\/span><\/li>\n
- method #2\n
- method #2 \u2013 by setting the rule names as attributes:\n
- method #1 \u2013 by setting