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

Validating form inputs in Magento 2 can be done in various ways, from using built-in rules in validation.js to defining your own custom checks. By adding the right validation, you ensure the data collected is accurate and useful, improving both store operations and customer experience. If you’d like to take it a step further and create entirely new fields in the checkout for customers to fill out, check out our tutorial on adding custom fields to Magento 2 checkout programmatically for a complete, code-based implementation.