Bind
Bind the form and all fields inside it with data-validaty
attribute will be validated.
<form>
<input type="text" data-validaty="validation_name" />
</form>
$('form').validaty();
Validators
We have a couple of validator ready to be used declared on file jquery.validaty.validators.js
.
Required
You must fill, select or check the fields.
data-validaty="required"
Number
You must fill a number. It can be a negative number or a float number.
data-validaty="number"
You must fill a valid e-mail.
data-validaty="email"
Min Length
You must to fill at least a certain number of characters.
data-validaty="minlength:3"
Max Length
You must to fill at most a certain number of characters.
data-validaty="maxlength:3"
Range Length
You must to fill at least the minimum and at most the maximum number of characters.
data-validaty="rangelength:2:4"
Range Number
You must enter a number between the minimum and maximum including these one.
data-validaty="range:2:4"
URL
You must enter a valid URL. It without "http" will be not accepted.
data-validaty="url"
Date ISO
You must enter a valid date formated as ISO yyyy-MM-dd
.
data-validaty="dateiso"
Contain
You must enter a text that contains the given parameter word
.
data-validaty="contain:word"
Equal
You must enter a text that equals the given parameter word
.
data-validaty="equal:text"
If you want to use text with space, just replace it for %20
.
data-validaty="equal:my%20precious"
Digits
You must enter just positive integers numbers.
data-validaty="digits"
Username
You must enter a valid username using just the letters a-z
, A-Z
, 0-9
and _
without simultaneous repetitions.
data-validaty="username"
Min Check
You must check at least a quantity of checkboxes.
You don't need to put the data-validaty
on each one that has the same name, just one is enough.
Disabled inputs is ignored.
data-validaty="mincheck:2"
Max Check
You can select at most a quantity of checkboxes.
You don't need to put the data-validaty
on each one that has the same name, just one is enough.
Disabled inputs is ignored.
data-validaty="maxcheck:1"
Min Select
You must select at least a quantity of options.
Disabled options is not verified.
data-validaty="minselect:2"
Max Select
You must select at least a quantity of options.
Disabled options is not verified.
data-validaty="maxselect:2"
Range Check
You must check at least a minimum and at most a maximum of checkboxes.
Disabled options is not verified.
data-validaty="rangecheck:1:2"
Range Select
You must select at least a minimum and at most a maximum of options.
Disabled options is not verified.
data-validaty="rangeselect:1:2"
Actions
By default, the validations is always trigged on submit
, and you can add your bind like blur
, keypress
, keyup
and so one.
The bind action starts with the key on
and we separate the arguments with colon :
.
Blur
data-validaty="required on:blur"
Keypress
data-validaty="rangelength:5:10 on:keyup"
You can declare more than one trigger at the same time:
data-validaty="rangelength:5:10 on:blur:keyup"
Balloon
There are two differents styles of how the message will be displayed, the default balloon
and the list
.
The list style will be appended after the invalid field. If it is checkbox or radio with the same name, will be appended after the last one.
$('input').validaty({ balloon: false });
Callbacks
Callbcks are function that are executed in some state/situations.
onValid
$('form').validaty({
onValid: function(inputs, evt) {
alert('this: ' + this + ', inputs: ' + inputs + ', evt: ' + evt);
}
});
Helpers:
You can to use the internal helpers to make your validations better.
helper.getParams(input);
Extract the field's parameters. range:1:9 on:blur
will result { actions: [{ name: 'on', args: ['blur'] }], validations: [{ name: 'range', args: [1, 9] }]
helper.isCheckable(input);
Checks if the given input
is a checkbox
or radio
.
helper.isDateISO(value);
Checks if the date is formatted as an ISO yyyy-MM-dd
.
helper.isDigits(value);
Checks if the given value
is a valid digit. It is just positive integer numbers.
helper.isEmail(value);
Checks if the given value
is a valid e-mail.
helper.isNumber(value);
Checks if the given value
is a number.
helper.isUrl(input);
Checks if the given value
is a valid URL.
helper.isUsername(value);
Checks if the given value
is a valid username text.
Options:
Enables the balloon message or list message style.
Enables the fade on balloons message on mouseover and mouseout.
Chooses if the first, the last or none of these field will be focused when validation fails. Options: null
, 'first'
or 'last'
.
Fields to be ignored during the validation.
The speed of the fade option
Callback that runs when all fields are valid.
Object to hold the injected validators functions from jquery.validaty.validators.js
file.
Changing the settings globally:
You can change any option mentioning the scope $.fn.validaty.defaults.
+ option_name. It must be called before you bind the plugin.
$.fn.validaty.defaults.fade = false;
$.fn.validaty.defaults.ignore = ':hidden';
Functions:
$('form').validaty('helper');
Gives you the internal helpers.
$('form').validaty('validator');
Gives you a validator.
$('form').validaty('valid');
Checks if all fields is valid.
$('form').validaty('validate');
Execute the validation over the form.
$('form').validaty('destroy');
Destroy the Validaty's bind and gives you the raw element before it.