Latest news

How To Add Custom Validate Field In Magento 2 Form?

No comments

In today blog post, we will show you three easy-to-follow steps to add a custom validate field in your Magento 2 form. Let’s get started!

Step 1: Add Custom Validate Method

First, in the data-mage-init attribute, you must add a custom method named tigrenValidateMethod.

<form class=”form contact”
action=”<?= $block->escapeUrl($block->getFormAction()) ?>”
id=”contact-form”
method=”post”
data-hasrequired=”<?= $block->escapeHtmlAttr(__(‘* Required Fields’)) ?>”
data-mage-init='{
“validation”:{},
“tigrenValidateMethod”:{}
}’>

Then, you must add your custom field into the form:

	<div class="field name required">
            <label class="label" for="field_tigren"><span>Field Tigren Test(Tigren)</span></label>
            <div class="control">
                <input name="field_tigren" id="field_tigren" value="" class="input-text required tigren" type="text"/>
            </div>
        </div>

Here we’ve just added a class named tigren to validate field.

Step 2: Bind Custom Validation Method Name To A Javascript File By Using RequireJs

app/design/frontend/Tigren/tigren/requirejs-config.js
	var config = {
	    map: {
		"*": {
		    tigrenValidateMethod: "js/tigrenValidateField"
		}
	    }
	};

 

Step 3: Create Javascript File To Confirm Validate

app/design/frontend/Tigren/tigren/web/js/tigrenValidateField.js
	define([
	    'jquery',
	    'jquery/ui',
	    'jquery/validate',
	    'mage/translate'
	], function($){
	    'use strict';
	    return function() {

		$.validator.addMethod(
		    "tigren",
		    function(value, element) {
		        return this.optional(element) || /^Tigren/.test(value);
		    },
		    $.mage.__("Type 'Tigren' in this field.")
		);
	    }
	});

 

Those are three simple steps to add the custom validate field into Magento 2 form. Hope you find it useful and see you in the next tutorial!

1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 4.64 out of 5)
Loading...

Related Posts:

A Brief History Of Magento From 2007-2018 [Infographic]

How To Display Order Information In Checkout Success Page In Magento 2?

How To Add Contact Form To CMS Page In Magento 2?

Magento vs WordPress 2018 Side-By-Side Comparison

Magento 2.3.0 Beta Release – What To Expect?

April LeeHow To Add Custom Validate Field In Magento 2 Form?

Leave a Reply

Your email address will not be published. Required fields are marked *