Validator
About
Breeze provides extendable validator to validate form data. It’s also possible to validate fields programmatically.
Form validation
Each form is processed automatically based on class, pattern, and
data-validate attributes:
<form>
<div class="field">
<input name="field-1" class="required"/>
</div>
<div class="field">
<input name="field-2" required pattern=".*\.myco\..*" title="The URL must be in a Myco domain"/>
</div>
<div class="field">
<input name="field-3" data-validate='{
required: true,
pattern: {
pattern: ".*\\.myco\\..*",
message: "The URL must be in a Myco domain"
}
}'/>
</div>
</form>
Manual validation
Examples:
// standard validation will add error messages
var isValid = $('input[name="field-3"]').valid();
// silent validation without error messages
var isValid = $('input[name="field-3"]').valid(true);
Built-in validation rules
required
<input name=".." required/>
<input name=".." class="required"/>
<input name=".." data-validate='{required:true}'/>
<input name=".." required class="email"/>
<input name=".." required data-validate='{email:true}'/>
equalTo
<input name=".." id="password" data-validate='{required:true}'/>
<input name=".." data-validate='{equalTo:"#password"}'/>
min
<input name=".." required min="5"/>
<input name=".." data-validate='{required:true,min:5}'/>
max
<input name=".." required max="10"/>
<input name=".." data-validate='{required:true,max:10}'/>
minlength
<input name=".." required minlength="5"/>
<input name=".." data-validate='{required:true,minlength:5}'/>
maxlength
<input name=".." required maxlength="10"/>
<input name=".." data-validate='{required:true,maxlength:10}'/>
pattern
<input name=".." required pattern=".*\.myco\..*" title="The URL must be in a Myco domain" />
<input name=".." data-validate='{
required: true,
pattern: {
pattern: ".*\\.myco\\..*",
message: "The URL must be in a Myco domain"
}
}'/>
validate-select
<select class="validate-select"></select>
<select data-validate='{"validate-select":true}'></select>
validate-not-negative-number
<input name=".." class="validate-not-negative-number"/>
<input name=".." data-validate='{"validate-not-negative-number":true}'/>
validate-date
<input name=".." data-validate='{required:true,"validate-date":{"dateFormat":"M\/dd\/y"}'/>
validate-dob
<input name=".." data-validate='{required:true,"validate-dob":{"dateFormat":"M\/dd\/y"}'/>
validate-item-quantity
<input name=".." data-validate='{
required: true,
"validate-item-quantity": {
minAllowed: 3,
maxAllowed: 9,
qtyIncrements: 3
}
}'/>
validate-emails
<input name=".." data-validate='{required:true,"validate-emails":true}'/>
password-not-equal-to-user-name
<input name=".." data-validate='{required:true,"password-not-equal-to-user-name":"username"}'/>
validate-customer-password
<input name=".." data-validate='{required:true,"validate-customer-password":true}'/>
Custom validation rule
Rule API
Validation rule — is a array of two elements registered in $.validator.validators
object:
$.validator.validators['validation-rule'] = [fn, message];
-
The first one — is a function that accepts value to validate, element that holds this value, and validation settings. The function must return boolean value:
(value, el, settings) => true -
The second element — is a error message to show is case of failed validation. This may be a string or function that accepts the same three arguments and returns the string:
$t('Validation failed') // OR (value, el, settings) => $t('Validation failed')
To apply rule for the field add the rule name to data-validate or class attribute:
<!-- Rule without settings -->
<input name=".." class="validation-rule"/>
<input name=".." data-validate='{"validation-rule":true}'/>
<!-- Rule with settings -->
<input name=".." data-validate='{"validation-rule":{key:"value"}}'/>
Example
Let’s create url validation rule based on Magento’s validate-clean-url rule.
Add the rule to your js file (it may be a custom.js file):
$.validator.validators['validate-clean-url'] = [
(value) => $.validator.utils.isEmptyNoTrim(value) || /^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+.(com|org|net|dk|at|us|tv|info|uk|co.uk|biz|se)$)(:(\d+))?\/?/i.test(value) || /^(www)((\.[A-Z0-9][A-Z0-9_-]*)+.(com|org|net|dk|at|us|tv|info|uk|co.uk|biz|se)$)(:(\d+))?\/?/i.test(value),
$t('Please enter a valid URL. For example http://www.example.com or www.example.com.')
];
Now you can use it in the form:
<input name=".." data-validate='{required:true,"validate-clean-url":true}'/>