In this article you will learn custom validation rule in Magento 2 form.
In order to demonstrate how to get the forms to be validated, let’s create a validation-free form with some fields. Here is the simple form which consist email text field and submit button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
There are three different ways to use form validation in magento 2
Way One :
|
1 2 3 4 5 6 7 |
<script type="text/x-magento-init"> { "#custom-form": { "validation": {"required":true} } } </script> |
Magento itself often uses the x-magento-init method to invoke a RequireJS module as a program. However, the real power of x-magento-init is the ability to create a Magento Javascript Component.
Magento itself often uses the x-magento-init method to invoke a RequireJS module as a program. However, the real power of x-magento-init is the ability to create a Magento Javascript Component.
Magento Javascript Components are RequireJS modules that return a function.
Magento encounters a text/x-magento-init script tag with an * attribute, it will
1] Initialize the specified RequireJS module (Magento_Ui/js/core/app)
2] Call the function returned by that module, passing in the data object
Way Two :
|
1 |
<form data-mage-init='{"validation": {"required":true}}' class="form" id="custom-form" method="post" autocomplete="off"> |
In addition to <script type="text/x-magento-init">, there’s another way to invoke similar functionality on a specific DOM node, and that’s with the data-mage-init attribute.
Way Three :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> require([ 'jquery', 'mage/mage' ], function($){ var dataForm = $('#custom-form'); dataForm.mage('validation', {"required":true}); }); </script> |
custom-form is form id you can replace it with your form id.
List of form validation rules : To wrap up this article, a list of validation rule names is provided here as a quick reference toward the official documentation.
Magento rules :
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-customer-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
required-number
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-date-range
validate-cpassword
validate-identifier
validate-zip-international
validate-one-required
validate-state
required-file
validate-ajax-error
validate-optional-datetime
validate-required-datetime
validate-one-required-by-name
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-type-select
validate-cc-number
validate-cc-type
validate-cc-exp
validate-cc-cvn
validate-cc-ukss
validate-length
required-entry
not-negative-amount
validate-per-page-value-list
validate-per-page-value
validate-new-password
required-if-not-specified
required-if-all-sku-empty-and-file-not-loaded
required-if-specified
required-number-if-specified
datetime-validation
required-text-swatch-entry
required-visual-swatch-entry
required-dropdown-attribute-entry
Validate-item-quantity
validate-grouped-qty
validate-one-checkbox-required-by-name
validate-date-between
validate-dob
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
allow-container-className
jQuery rules :
required,
remote,
email,
url,
date,
dateISO,
number,
digits,
creditcard,
equalTo,
maxlength,
minlength,
rangelength,
range,
max,
min
Happy Coding. Keep Liking & Sharing 
DevDocs
Home
