How to Add Validation For Custom Password Field in Magento 2
Do you know that you can add the Magento 2 default password validations to custom fields as well? 🤔
Read this blog post to find the method to add validation for custom password field in Magento 2 using the default validation rules.
In your custom Magento development project, you may often require to collect information from the customers through custom fields, such as passwords. Such fields need to be validated on the submission to ensure that the customers enter hard-to-crack passwords in order to prevent the bad guys from accessing their information on your store through guesswork.
If you are a Magento developer working on such custom development and want to add validation for custom password field in Magento 2, then this blog post is for you.
Follow me till the end of this solution to add password validation in Magento 2 custom field.
Method to Add Validation in Magento 2 Custom Password Field
Magento offers 100+ built-in form validation rules, including the validate-customer-password that you can use in your custom development for customer password validation. You can follow the steps provided below to add the default validations to custom password fields in Magento 2.
Open the phtml file of the page where you want to add validation in the custom password field. Now, use the following piece of code to add default Magento 2 password validation to a custom field:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<form class="form create account form-create-account" method="post" id="form-validate" autocomplete="off" data-mage-init='{"validation": {}}' novalidate="novalidate"> <fieldset class="fieldset" data-hasrequired="* Required Fields"> <div class="field password required"> <label for="password" class="label"><span><?= $block->escapeHtmlAttr(__('Password')) ?></span></label> <div class="control"> <input type="password" name="password" id="password" title="Password" class="input-text" data-password-min-character-sets="3" data-validate="{required:true, 'validate-customer-password':true}" data-password-min-length="8"> </div> </div> <div class="actions-toolbar"> <div class="primary"> <button type="submit" class="action submit primary" title="Create an Account"> <span><?= $block->escapeHtmlAttr(__('Create an Account')) ?></span> </button> </div> </div> </fieldset> </form> |
You can tweak the value of the data-password-min-character-sets and data-password-min-length as per your needs. In this example, the value of the data-password-min-character-sets is set to 3 and data-password-min-length to 8, and therefore it throws the error as shown in the screenshot below in case of invalid inputs.
The value of data-password-min-character-sets can be set to 2, 3, or 4 to make it mandatory for the customers to use two, three, or four different classes of characters in their passwords, respectively.
That’s it! This is how you can add validation in Magento 2 custom password field using the built-in validation rules.
Stuck somewhere? Feel free to ask doubts or queries in the comments. I’d be happy to help! 😇
Loved this solution? Show your love by rating it with 5-stars and sharing it with your friends via social media. 😊
Thanks for reading. 🍀
Prev
How to Make Google Fonts GDPR Compliant
How to Optimize a Shopify Website for SEO [2024]
Next