Magento 2: Custom Form Validation

This article shows how you can add Javascript Form Validation to any custom form you make for any custom module in Magento 2.

I will show a simple form with first name, last name, and email fields.

We will apply two validation rules in the form:

– required entry validation
– email validation

There are a number of other validation rules available as per your need. It’s present in the file: lib/web/mage/validation.js

Some validation rules present in that JS file are:

datetime-validation
validate-new-password
validate-cc-number
validate-date
validate-url
validate-password
…
and much more…

To validate a form, you need to add two things:

1) Add something to the input types to make them required fields
2) Add javascript code at the end of the file

1) Add something to the input type fields to make them required fields

I will show three ways to make input field as required:

a) Add class = required

<input type="text" id="firstname" name="firstname" value="" title="First Name" class="input-text required" autocomplete="off" >

b) Add property required = true

<input type="text" id="lastname" name="lastname" value="" title="Last Name" class="input-text" required="true" autocomplete="off" >

c) Add data-validate property

<input type="email" name="email" autocomplete="email" id="email_address" value="" title="Email" class="input-text" data-validate="{required:true, 'validate-email':true}" >

2) Add javascript code at the end of the file

We can add any of the following two javascript code after the form close tag:

Note: “form-validate” is the id of the form.

a) First Javascript

<script>
require([
    'jquery',
    'mage/mage'
], function($){
    var dataForm = $('#form-validate');
    dataForm.mage('validation', {});
});
</script>

b) Second Javascript

<script type="text/x-magento-init">
{
    "#form-validate": {
        "validation": {}
    }
}
</script>

Here’s the full example code:

<form class="form create account form-create-account" action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off">
    <?= /* @noEscape */ $block->getBlockHtml('formkey'); ?>
    
    <fieldset class="fieldset create info">
        <legend class="legend"><span>Personal Information</span></legend><br>
        <input type="hidden" name="success_url" value="">
        <input type="hidden" name="error_url" value="">
        
        <div class="field field-name-firstname required">
            <label class="label" for="firstname">
                <span>First Name</span>
            </label>

            <div class="control">
                <input type="text" id="firstname" name="firstname" value="" title="First Name" class="input-text required" autocomplete="off" >
            </div>
        </div>
        <div class="field field-name-lastname required">
            <label class="label" for="lastname">
                <span>Last Name</span>
            </label>

            <div class="control">
                <input type="text" id="lastname" name="lastname" value="" title="Last Name" class="input-text" required="true" autocomplete="off" >
            </div>
        </div>

        <div class="field required">
            <label for="email_address" class="label">
                <span>Email</span>
            </label>

            <div class="control">
                <input type="email" name="email" autocomplete="email" id="email_address" value="" title="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="<?= $block->escapeHtmlAttr(__('Submit')) ?>"><span><?= $block->escapeHtml(__('Submit')) ?></span></button>
        </div>
    </div>

</form>

<script>
/*require([
    'jquery',
    'mage/mage'
], function($){
    var dataForm = $('#form-validate');
    dataForm.mage('validation', {});
});*/
</script>

<script type="text/x-magento-init">
{
    "#form-validate": {
        "validation": {}
    }
}
</script>

Hope this helps. Thanks.