How To Validate Form in Magento 2
Vinh Jacker | 12-18-2024
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!
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started