How To Validate Form in Magento 2
Validating a new form in Magento 2 is a crucial checking step before you do the submission to your local. If you are building your store with Magento 2 platform, validation.js
file will be used here. It is allowed you to inject the new validation into that file. Actually, there are many different ways to validate the form in Magento 2 with validation.js
file. So, now we will be together to get more clear information on this topic.
Validate form in Magento 2 in following steps:
Step 1: Create a test form Step 2: Accept javascript validation
To be ready for the new validation, we need to create a test form
<form class="form" id="custom-form" method="post" autocomplete="off">
<fieldset class="fieldset">
<legend class="legend"><span><?php echo __('Personal Information') ?></span></legend><br>
<div class="field required">
<label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
<div class="control">
<input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
</div>
</div>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" class="action submit primary" title="<?php echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
</div>
</div>
</form>
After that, the form is created as the attribute for validation.
Next, to accept javascript validation, please run the below script:
<script type="text/x-magento-init">
{
"#custom-form": {
"validation": {}
}
}
</script>
or you can make that operation directly in .html like this
<form data-mage-init='{"validation": {}}' class="form" id="custom-form" method="post" autocomplete="off">
or
<script type="text/javascript">
require([
'jquery',
'mage/mage'
], function($){
var dataForm = $('#custom-form');
dataForm.mage('validation', {});
});
</script>
After all, the output of the javascript library is
lib/web/mage/validation.js
Please follow this intructions, you will achieve the different types of validation including validate-cc-cvn
, validate-length
, validate-one-required
as well as the type of widget $.widget("mage.validation")
.
Related Topics
- Magento 2 Add a new input form checkout page
- Magento 2 Add a custom Zipcode validator
- Magento 2 Custom Shipping Carrier validator
- Magento 2 Add custom validations before placing orders
Wrap up
It’s pretty easy to create a form validation in Magento 2 in various ways. I hope this tutorial helped you to validate your form inputs and make your work easier.
Happy reading!
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid
People also searched for
- magento 2 validate form
- magento 2 validate form
- magento 2 admin form validation
- magento 2 validate checkout form
- magento 2 form validation code
- magento 2 form validation is not working
- validate form in magento 2
- magento 2 form validation not working
- magento 2 add validation to form
- magento 2 validation without form
- 2.3.x, 2.4.x