{"id":7343,"date":"2019-09-28T18:55:09","date_gmt":"2019-09-28T13:25:09","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=7343"},"modified":"2019-10-04T11:22:58","modified_gmt":"2019-10-04T05:52:58","slug":"magento-2-validate-custom-form","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/magento-2\/magento-2-validate-custom-form\/","title":{"rendered":"Magento 2 – How To Validate Custom Form"},"content":{"rendered":"

In this post I am going to explain how to validate custom form in magento 2.<\/p>\n

The data validation is the important step before the submission. The data needs to be checked for correct input and the validity of data can be checked via default Magento 2 validation rules.<\/p>\n

Follow the steps to add validation inside your custom form.<\/p>\n

Let’s first create a sample form with some fields. Add the following code inside it.<\/p>\n

<form class=\"form\" id=\"customForm\" method=\"post\" enctype=\"multipart\/form-data\" autocomplete=\"off\" data-mage-init='{\"validation\":{}}'>\r\n    <?= $block->getBlockHtml('formkey') ?>\r\n    <fieldset class=\"fieldset\">\r\n        <h3 class=\"legend\">\r\n            <span>Contact Information<\/span>\r\n        <\/h3>\r\n        <div class=\"field name required\">\r\n            <label class=\"label\" for=\"name\"><span><?= $block->escapeHtml(__('Name')) ?><\/span><\/label>\r\n            <div class=\"control\">\r\n                <input name=\"name\" id=\"name\" title=\"<?= $block->escapeHtmlAttr(__('Name')) ?>\" value=\"\" class=\"input-text\" type=\"text\" data-validate=\"{required:true}\" \/>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"field email required\">\r\n            <label class=\"label\" for=\"email\"><span><?= $block->escapeHtml(__('Email')) ?><\/span><\/label>\r\n            <div class=\"control\">\r\n                <input name=\"email\" id=\"email\" title=\"<?= $block->escapeHtmlAttr(__('Email')) ?>\" value=\"\" class=\"input-text\" type=\"text\" data-validate=\"{required:true, 'validate-email':true}\" \/>\r\n            <\/div>\r\n        <\/div>\r\n    <\/fieldset>\r\n    <div class=\"actions-toolbar\">\r\n        <div class=\"primary\">\r\n            <button type=\"submit\" class=\"action primary\" title=\"<?= $block->escapeHtml(__('Submit')) ?>\">\r\n                <span><?= $block->escapeHtml(__('Submit')) ?><\/span>\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/form><\/pre>\n
Now add following code snippet below the form.<\/p>\n
<script type=\"text\/x-magento-init\">\r\n    {\r\n        \"#customForm\": {\r\n            \"validation\": {}\r\n        }\r\n    }\r\n<\/script><\/pre>\n
\"Magento<\/p>\n
Thats it. Enjoy Magento 2!!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post I am going to explain how to validate custom form in magento 2. The data validation is the important step before the submission. The data needs to be checked for correct input and the validity of data can be checked via default Magento 2 validation rules. Follow the steps to add validation… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":7376,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[9,10,27,696],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7343"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=7343"}],"version-history":[{"count":1,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7343\/revisions"}],"predecessor-version":[{"id":7347,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7343\/revisions\/7347"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/7376"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=7343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=7343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=7343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}