Shopping cart

How To Validate Form in Magento 2

Validating a new form in Magento 2 is a crucial checking step before you do the submitation to your local. If you are building your store with Magento 2 platform, validation.js file will be used here. It is allowed for 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.

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

Enjoyed the tutorial? Spread it to your friends!


Brian Tran
Brian Tran
Senior Magento Developer who is passionate about development and love technology

Comments for How To Validate Form in Magento 2

Please leave comments if you have any questions, feedbacks.

Module Development

We recommend:

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.1.x, 2.2.x, 2.3.x