Validation Rule List
This is a list of available form validation rules, ordered alphabetically. Each rule contains a short description and a usage example.
alphanumeric
Check if the value contains only letters, numbers, spaces or underscores.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="alphanumeric"/>
...
</form>
credit-card-types
A valid credit card number of a certain type(s), that can be specified as parameters.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'credit-card-types':{'amex':true,'mastercard':true}}"/>
...
</form>
Possible values are: amex, mastercard, visa, dinersclub, enroute, discover, jcb, unknown, all.
dateITA
Date in Italy, \d{1,2}\/\d{1,2}\/\d{4} format, i.e. 4/4/24 or 24/12/21.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="dateITA"/>
...
</form>
44/44/40
- false12-12-2021
- false1/1/2022
- true12/10/2022
- true
There is a sanity check, so dates such as 99/12/2021
will be false.
dateNL
Date in Netherlands, \d\d?[.\/-]\d\d?[.\/-]\d\d\d?\d? format.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="dateNL"/>
...
</form>
There is no sanity check so dates such as 33-12-12
will be true.
datetime-validation
Checks that the field is not empty.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="datetime-validation"/>
...
</form>
email2
Checks for a valid email address.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="email2"/>
...
</form>
greater-than-equals-to
Checks for a value of one field being greater than or equal to a value of another field
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" value="" type="text" data-validate="{'greater-than-equals-to':'#field-5'}"/>
<input name="field-5" id="field-5" title="Field to compare against" type="text" value=""/>
...
</form>
It does not check for both values to be numeric, so if field-3
= 5 and field-5
= ‘a’, it will silently accept it
integer
Checks for a field value to be an integer, positive or negative.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="integer"/>
...
</form>
ipv4
Checks for a valid IPv4 address.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="ipv4"/>
...
</form>
ipv6
Checks for a valid IPv6 address.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="ipv6"/>
...
</form>
less-than-equals-to
Checks for a value of one field being less than or equal to a value of another field.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" value="" type="text" data-validate="{'less-than-equals-to':'#field-5'}"/>
<input name="field-5" id="field-5" title="Field to compare against" type="text" value=""/>
...
</form>
It does not check for both values to be numeric, so if field-3
= 10 and field-5
= ‘3a’, it will silently accept it.
letters-only
Checks for Latin A-Z,a-z letters only.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="letters-only"/>
...
</form>
letters-with-basic-punc
Checks for Latin letters and punctuation only, the regex being a-z\-.,()'\"\s
.
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" class="letters-with-basic-punc"/>
...
</form>
max-words
Checks that there are no more than a predefined number of words. Maximum number of words should be set as a parameter.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'max-words':4}"/>
...
</form>
Here, it accepts no more than 4 words.
min-words
Checks that there are not less than a predefined number of words. Minimum number of words should be set as a parameter.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'min-words':4}"/>
...
</form>
Here, it accepts at least 4 words.
mobileUK
Checks for a valid UK mobile number.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'mobileUK':true}"/>
...
</form>
+447911123456
- true44791112
- false
no-marginal-whitespace
Does not allow whitespaces at the start, or at the end, of an input text.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'no-marginal-whitespace':true}"/>
...
</form>
no-whitespace
Does not allow whitespaces anywhere in an input text.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'no-whitespace':true}"/>
...
</form>
not-negative-amount
Checks for a non-negative number.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'not-negative-amount':true}"/>
...
</form>
There is a sanity check, so 0a will result in a warning.
0
- pass2.4
- pass0a
- fail+2
- fail
password-not-equal-to-user-name
Checks that a password is not the same as a predefined string.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'password-not-equal-to-user-name':'username@domain.com'}"/>
...
</form>
In the example above, if you enter username@domain.com
you will get a warning.
pattern
Checks an input against a predefined regex pattern.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'pattern':'[a-z]'}"/>
...
</form>
In the example above anything except lowercase letters will trigger a warning.
phoneUK
Checks for a valid UK phone number.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'phoneUK':true}"/>
...
</form>
phoneUS
Checks for a valid US phone number.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'phoneUS':true}"/>
...
</form>
range-words
Checks for a predefined number of words.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'range-words':[2,4]}"/>
...
</form>
In the example above, only a 2, 3 or 4 word input string will not trigger a warning:
not used
- passnot
- failnot used before
- pass
required-dropdown-attribute-entry
Checks that all disabled input fields (with a required-option
class) within a table tag are empty.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
<table>
<tbody>
<tr><th><input type="text" class="required-option" name="field-1" value="t" disabled/></th></tr>
<tr><th><input type="text" class="required-option" name="field-2"/></th></tr>
<tr><th><input type="text" class="required-dropdown-attribute-entry" name="field-8"/></th></tr>
</tbody>
</table>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" title="Submit" class="action submit primary">
<span>Submit</span>
</button>
</div>
</div>
</form>
In the example above it will trigger a warning as field-1
is not empty.
required-entry
Checks that a field is not empty.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="text" data-validate="{'required-entry':true}"/>
...
</form>
required-file
Checks for a file field to be populated.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="example" id="example" title="Example" value="" type="file" data-validate="{'required-file':true}"/>
...
</form>
required-if-all-sku-empty-and-file-not-loaded
Makes the field required if specified fields and a specified file input are empty.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-3" id="field-3" title="Field 3" type="text" data-validate="{'required-if-all-sku-empty-and-file-not-loaded':{'specifiedId':'#field-5','dataSku': 'data-sku'}}"/>
<input name="field-5" id="field-5" type="file"/>
<input type="text" id="field-6" data-sku=true value=""/>
...
</form>
In the example above, a warning is only displayed if all fields are empty.
required-if-not-specified
Makes a field required if the dependent field is filled.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'required-if-not-specified':'#field-5'}"/>
<input name="field-5" id="field-5" type="text"/>
...
</form>
If field-5
is not empty, then field-3
is not required.
required-if-specified
Makes a field required if the dependent field is filled.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'required-if-specified':'#field-5'}"/>
<input name="field-5" id="field-5" type="text"/>
...
</form>
If field-5
is not empty, then field-3
is required.
required-number
Requires a number to be entered.
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'required-number':true}"/>
...
</form>
Warning : This tag has bugs and will accept any non-empty input.
required-number-if-specified
Makes a field number required if the dependent field is filled.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'required-number-if-specified':'#field-5'}"/>
<input name="field-5" id="field-5" type="text"/>
...
</form>
If field-5
is not empty, then field-3
is required, although any input will work, not just numbers.
required-text-swatch-entry
Checks that all disabled input fields (with a required-option
class) within a table tag to be empty.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
<table>
<tbody>
<tr><th><input type="text" class="required-option" name="field-1" value="t" disabled/></th></tr>
<tr><th><input type="text" class="required-option" name="field-2"/></th></tr>
<tr><th><input type="text" class="required-text-swatch-entry" name="field-8"/></th></tr>
</tbody>
</table>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" title="Submit" class="action submit primary">
<span>Submit</span>
</button>
</div>
</div>
</form>
In the example above, it will trigger a warning as field-1
is not empty.
required-visual-swatch-entry
Checks that all disabled input fields (with a required-option
class) within a table tag are empty.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
<table>
<tbody>
<tr><th><input type="text" class="required-option" name="field-1" value="t" disabled/></th></tr>
<tr><th><input type="text" class="required-option" name="field-2"/></th></tr>
<tr><th><input type="text" class="required-visual-swatch-entry" name="field-8"/></th></tr>
</tbody>
</table>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" title="Submit" class="action submit primary">
<span>Submit</span>
</button>
</div>
</div>
</form>
In the example above it will trigger a warning as field-1
is not empty.
stripped-min-length
Checks that there are at least a predefined number of characters in the input.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'stripped-min-length':'4'}"/>
...
</form>
In the example above, any input less than 4 characters will trigger a warning.
time
Checks for a valid time between 00:00 and 23:59:59.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'time':true}"/>
...
</form>
time12h
Checks for a valid time between 00:00 am and 12:00 pm. 12:01 pm
and 11:59 pm
values are also valid.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'time12h':true}"/>
...
</form>
Warning : The implementation has bugs, for example a valid time 00:31 am
triggers a warning.
url2
Checks for a valid URL link.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'url2':true}"/>
...
</form>
http://www.m2.com
- truemagento.com
- false
validate-admin-password
Checks for a valid admin password. It must be 7 or more characters long and it has to have letters and numbers only.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-admin-password':true}"/>
...
</form>
admindsdsdsd
- falseminsdsdss8
- true
validate-ajax-error
Checks for an AJAX error.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-ajax-error':true}"/>
...
</form>
validate-alpha
Checks for letters (a-z or A-Z) only.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-alpha':true}"/>
...
</form>
jkjkjk
- truedfdfdf1
- false
validate-alphanum
Checks for letters (a-z or A-Z) or numbers (0-9) only.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-alphanum':true}"/>
...
</form>
validate-alphanum-with-spaces
Checks for letters (a-z or A-Z) or numbers (0-9) or spaces only.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-alphanum-with-spaces':true}"/>
...
</form>
validate-cc-cvn
Checks for a valid credit card identification number.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-cc-cvn':'#field-5'}"/>
<input name="field-5" id="field-5" type="text" value="AE"/>
...
</form>
validate-cc-exp
Checks for a valid credit card expiration month.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-cc-exp':'#field-5'}"/>
<input name="field-5" id="field-5" type="text" value="2022"/>
...
</form>
It interprets input as a month number with year set in a predefined field. Sanity check is limited.
40
- trueG
- false
validate-cc-number
Checks for a valid credit card number based on mod 10.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-cc-number':true}"/>
...
</form>
validate-cc-type
Checks for a credit card number to match a predefined credit card type.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-cc-type':'#field-5'}"/>
<input name="field-5" id="field-5" type="text" value="AE"/>
...
</form>
Field field-5
holds a credit card type, possible values are:
SO
- SoloSM
- Switch/MaestroVI
- VisaMC
- MasterCardAE
- American ExpressDI
- DiscoverJCB
- JCB (Japan Credit Bureau)DN
- DinersUN
- UNMI
- Maestro InternationalMD
- Maestro Domestic
validate-cc-type-select
Checks for a credit card type to match a predefined credit card number.
Example
1
2
3
4
5
6
7
8
9
10
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<select name="field-4" id="field-3" title="Field 3" data-validate="{'validate-cc-type-select':'#field-5'}">
<option value="AE">American Express</option>
<option value="VI">VISA</option>
<option value="MC">MasterCard</option>
</select>
<input name="field-5" id="field-5" type="text" value="378282246310005"/>
...
</form>
validate-cc-ukss
Checks that the Switch/Solo/Maestro issue number and start date are filled.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-cc-ukss':true}"/>
...
</form>
It does not do any sanity check except that a field is not empty.
validate-clean-url
Checks for a valid URL. Protocol type is not necessary.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-clean-url':true}"/>
...
</form>
fsdsd
- falsehttps://www.domain.com
- truehttp://domain.com
- falsewww.domain.com
- truedomain.com
- false
validate-code
Checks for an input that has only letters (a-z or A-Z), numbers (0-9) or underscore (_), and the first character should be a letter.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-code':true}"/>
...
</form>
1ddf
- falseAd
- true
validate-cpassword
Checks for a confirmation password to be the same as the password.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="password" id="password" title="Field 3" type="text" data-validate="{'validate-admin-password':true}"/>
<input name="confirmation" id="confirmation" title="Field 3" type="text" data-validate="{'validate-cpassword':true}"/>
...
</form>
It is important to have password
and confirmation
IDs for the fields above.
validate-css-length
Checks for a valid CSS length (Ex: 100px, 77pt, 20em, .5ex or 50%).
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-css-length':true}"/>
...
</form>
validate-currency-dollar
Checks for a valid US dollar amount, for example $100.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-currency-dollar':true}"/>
...
</form>
$100
- true200
- true$ 100
- false
validate-customer-password
Checks for a password to be greater or equal to a predefined number of characters and predefined number of character classes. Classes of characters: Lowercase, Uppercase, Digits, Special Characters.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-customer-password':true}" data-password-min-length="10" data-password-min-character-sets="2"/>
...
</form>
In the example above the password must be 10 or more characters long and have two or more different character classes:
dfdfdfdfdfdfdfdfdfdfdfdf
- falsedfdfdfdfdfdfdfdfdfdfdfdf1
- trued1$
- false
validate-data
Checks for an input to have only letters (a-z or A-Z), numbers (0-9) or underscore (_), and the first character should be a letter.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-data':true}"/>
...
</form>
validate-date
Checks for a valid date against a predefined format.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-date':{'dateFormat':'D Y'}}"/>
...
</form>
In the example above:
09 09
- truedfdf
- false98-98
- false
validate-date-au
Checks for a valid date in the format: dd/mm/yyyy.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-date-au':true}"/>
...
</form>
validate-date-range
Checks for From
-To
date range.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" class="validate-date-range date-range-form-to"/>
<input name="field-5" id="field-5" title="Field 5" type="text" class="validate-date-range date-range-form-from"/>
...
</form>
validate-digits
Checks for a digits only input.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-digits':true}"/>
...
</form>
sdsd
- false34
- true
validate-digits-range
Checks for a digits only input within a specified range. There are two ways to specify a range. You can specify a negative number as a range limit.
Example
1
2
3
4
5
6
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-digits-range':'-10--9'}"/>
<input name="field-5" id="field-5" title="Field 5" type="text" data-validate="{'validate-digits-range':true}" class="digits-range-10-34"/>
...
</form>
In the example above, the first range is from -10
to -9
and the second range is from 10
to 34
.
validate-email
Checks for a valid email address.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-email':true}"/>
...
</form>
validate-emails
Checks for a valid email(s) separated (if several) by a comma, newline or a space.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-emails':true}"/>
...
</form>
test@test.com
- truetest@test.com,test@test2.com
- truetest@test.com - test@test2.com
- false
validate-emailSender
Checks for a valid email address although no sanity check is performed, i.e. any input is valid. Regex is ^[\S ]+$
.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-emailSender':true}"/>
...
</form>
validate-fax
Checks for a valid fax number.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-fax':true}"/>
...
</form>
044-434-3434
- true111 222-2323
- true111-12-2323
- false
validate-forbidden-extensions
Checks that an input (comma separated file extensions) does not have an extension from a predefined list.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-forbidden-extensions':true}" data-validation-params="jpg,ddf"/>
...
</form>
ddff
- truejpg,png
- falseddf
- false
validate-greater-than-zero
Checks for a number greater than zero. There is a sanity check so dfdf
input will trigger a warning.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-greater-than-zero':true}"/>
...
</form>
r4
- false3.4
- true+1.3
- true0
- false
validate-identifier
Checks for a valid URL key.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-identifier':true}"/>
...
</form>
dfdfdf
- truehepee.html
- truefdf$%.html
- false
validate-item-quantity
Checks for a quantity number to be within minAllowed
and maxAllowed
and to be in qtyIncremenets
.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-item-quantity':{'minAllowed':10,'maxAllowed':200,'qtyIncrements':4}}"/>
...
</form>
9
- false28
- true29
- false300
- false
validate-length
Checks for input length to be within specified limits.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-length':true}" class="minimum-length-2 maximum-length-5"/>
...
</form>
In the example above:
f
- falsefa
- truedfdfdf
- false
validate-new-password
Checks for input to be 6 or more characters. Leading and trailing spaces are ignored.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-new-password':true}"/>
...
</form>
validate-no-empty
Checks that an input is not empty.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-no-empty':true}"/>
...
</form>
validate-no-html-tags
Checks that an input does not have HTML tags.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-no-html-tags':true}"/>
...
</form>
validate-no-utf8mb4-characters
Checks that an input does not have characters that would require more than 3 bytes.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-no-utf8mb4-characters':true}"/>
...
</form>
validate-not-negative-number
Checks for non-negative number input.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-not-negative-number':true}"/>
...
</form>
validate-not-number-first
Checks that an input does not start with a number.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-not-number-first':true}"/>
...
</form>
validate-number
Checks for a valid number.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-number':true}"/>
...
</form>
validate-number-range
Checks for a number to be within a specified range.
Example
1
2
3
4
5
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<input name="field-4" id="field-3" title="Field 3" type="text" data-validate="{'validate-number-range':'19-30'}"/>
...
</form>
validate-one-required
It is supposed to check for radio buttons selection but it always returns true. There is possibly a bug in JS files.
Example
1
2
3
4
5
6
7
8
9
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="radio" value="1" data-validate="{'validate-one-required':true}"/>
<input name="field-4" id="field-3" title="Field 3" type="radio" value="2"/>
<input name="field-4" id="field-6" title="Field 6" type="radio" value="2"/>
</div>
...
</form>
validate-one-required-by-name
Checks for a radio button selection.
Example
1
2
3
4
5
6
7
8
9
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="radio" value="1" data-validate="{'validate-one-required':true}"/>
<input name="field-4" id="field-3" title="Field 3" type="radio" value="2"/>
<input name="field-4" id="field-6" title="Field 6" type="radio" value="2"/>
</div>
...
</form>
validate-optional-datetime
Validates an optional datetime field.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<select name="options[2][month]" id="options_2_month" class="product-custom-option admin__control-select datetime-picker" data-selector="options[2][month]">
<option value="">-</option>
<option value="1">01</option>/option>
</select>
<select name="options[2][day]" id="options_2_day" class="product-custom-option admin__control-select datetime-picker" data-selector="options[2][day]">
<option value="">-</option><option value="1">01</option><option value="2">02</option>
</select>
<select name="options[2][year]" id="options_2_year" class="product-custom-option admin__control-select datetime-picker" data-selector="options[2][year]">
<option value="">-</option><option value="2022">2022</option>
</select>
<input type="hidden" name="validate_datetime_2" class="validate-datetime-2" value="" data-validate="{'validate-optional-datetime':2}">
</div>
...
</form>
validate-password
Checks for an input to be 6 or more characters long. Leading and trailing spaces are ignored.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-password':true}"/>
</div>
...
</form>
validate-per-page-value
Checks for an input to be a specified value from a comma separated field.
Example
1
2
3
4
5
6
7
8
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-per-page-value':true}"/>
<input name="field-5" id="field-5_values" type="hidden" value="1,3,4,5,6,8"/>
</div>
...
</form>
44
- false8
- true
validate-per-page-value-list
Checks for comma separated numbers.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-per-page-value-list':true}"/>
</div>
...
</form>
kjkjdf,dfdf
- false1
- true1,3,4,5
- true
validate-phoneLax
Checks for a valid phone number. Formatting may be lax.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-phoneLax':true}"/>
</div>
...
</form>
validate-phoneStrict
Checks for a valid phone number with strict formatting.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-phoneStrict':true}"/>
</div>
...
</form>
validate-range
Checks for an input to be within a specified range.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" class="range-9-20" title="Field 5" type="text" data-validate="{'validate-range':true}"/>
</div>
...
</form>
100
- false9
- true
validate-required-datetime
Validates a required datetime field.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<select name="options[2][month]" id="options_2_month" class="product-custom-option admin__control-select datetime-picker" data-selector="options[2][month]">
<option value="">-</option>
<option value="1">01</option>/option>
</select>
<select name="options[2][day]" id="options_2_day" class="product-custom-option admin__control-select datetime-picker" data-selector="options[2][day]">
<option value="">-</option><option value="1">01</option><option value="2">02</option>
</select>
<select name="options[2][year]" id="options_2_year" class="product-custom-option admin__control-select datetime-picker" data-selector="options[2][year]">
<option value="">-</option><option value="2022">2022</option>
</select>
<input type="hidden" name="validate_datetime_2" class="validate-datetime-2" value="" data-validate="{'validate-required-datetime':2}">
</div>
...
</form>
validate-select
Checks for a select field to be selected.
Example
1
2
3
4
5
6
7
8
9
10
11
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<select name="field-4" id="field-5" data-validate="{'validate-select':true}">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
...
</form>
validate-ssn
Checks for a valid Social Security number.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-ssn':true}"/>
</div>
...
</form>
validate-state
Checks for a valid State/Province.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-state':true}"/>
</div>
...
</form>
validate-street
Checks for a valid street address. It allows only letters (a-z or A-Z), numbers (0-9), spaces and #
.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-street':true}"/>
</div>
...
</form>
validate-url
Checks for a valid URL.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-url':true}"/>
</div>
...
</form>
validate-xml-identifier
Checks for a valid XML-identifier (Ex: something_1, block5, id-4).
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-xml-identifier':true}"/>
</div>
...
</form>
validate-zero-or-greater
Checks that a number is zero or greater in this field.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-zero-or-greater':true}"/>
</div>
...
</form>
validate-zip-international
Checks for a valid international zip code.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-zip-international':true}"/>
</div>
...
</form>
validate-zip-us
Checks for a valid US zip code (Ex: 90602 or 90602-1234).
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'validate-zip-us':true}"/>
</div>
...
</form>
vinUS
Checks for a valid vehicle identification number (VIN).
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'vinUS':true}"/>
</div>
...
</form>
zip-range
Checks for a zip code to be in the range 902xx-xxxx to 905-xx-xxxx.
Example
1
2
3
4
5
6
7
<form class="form" id="my-form" method="post" data-mage-init='{"validation": {}}'>
...
<div class="control">
<input name="field-4" id="field-5" title="Field 5" type="text" data-validate="{'zip-range':true}"/>
</div>
...
</form>