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 class="actions-toolbar">
        <div class="primary">
            <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>

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": {}

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">

<script type="text/javascript">
], function($){
   var dataForm = $('#custom-form');
   dataForm.mage('validation', {});

After all, the output of the javascript library is


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

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!

Enjoyed the tutorial? Spread it to your friends!


Sam Thomas
Sam Thomas

Sam is the CEO and Founder of Mageplaza, pursuing a simple and healthy lifestyle. He is a friend, a husband, and a father to two children. As a trainer and an aspiring influencer, he is also a big fan of sports and travel. Sam is exceptionally knowledgeable about e-commerce, especially Magento and Shopify, with 10 years of experience in the field.

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.2.x, 2.3.x, 2.4.x