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>
        </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”)”.



Next tutorial:

Module Development Series



Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
how-to
validate-form

Module Development

Comments for How To Validate Form in Magento 2

Please leave comments if you have any questions, feedbacks.

You also may like these Magento 2 Extensions

One Step Checkout

$199
10 reviews

Layered Navigation

$99
12 reviews

SEO

FREE
no review

Shop By Brand

$99
3 reviews

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