Aria-validate demo
Show code
$('#requiredField').ariaValidate({
behaviour: [{
event: 'input',
dirty: true,
validate: {
required: true
}
},
{
event: 'blur',
main: true,
validate: {
required: true
}
}
],
});
Show code
$('#requiredIfField').ariaValidate({
behaviour: [{
event: 'input',
dirty: true,
validate: {
required: function() {
return $('#requiredField').find('.control__field').first().val().length > 0 ? false : true; // when function returns false, the field is not required
}
}
},
{
event: 'blur',
main: true,
validate: {
required: function() {
return $('#requiredField').find('.control__field').first().val().length > 0 ? false : true; // when function returns false, the field is not required
}
}
}
],
});
Show code
$('#lettersField').ariaValidate({
behaviour: [{
event: 'input change',
dirty: false,
validate: {
required: true,
letters: true,
maxLength: 15
}
},
{
event: 'input',
dirty: true,
validate: {
required: true,
letters: true,
maxLength: 15,
minLength: 5
}
},
{
event: 'blur',
main: true,
validate: {
required: true,
letters: true,
maxLength: 15,
minLength: 5
}
}
],
});
Show code
$('#digitsField').ariaValidate({
behaviour: [{
event: 'input change',
dirty: false,
validate: {
required: true,
digits: true,
maxLength: function() {
return 20
}
}
},
{
event: 'input change',
dirty: true,
validate: {
required: true,
digits: true,
minLength: 5,
maxLength: function() {
return 20
}
}
},
{
event: 'blur',
main: true,
validate: {
required: true,
digits: true,
minLength: 5,
maxLength: function() {
return 20
}
}
}
],
});
Show code
$('#intField').ariaValidate({
behaviour: [{
event: 'input change',
dirty: false,
validate: {
int: true,
max: 100
}
},
{
event: 'input change',
dirty: true,
validate: {
int: true,
min: 10,
max: 100
}
},
{
event: 'blur',
main: true,
validate: {
int: true,
min: 10,
max: 100
}
}
],
});
Show code
$('#intOffsetField').ariaValidate({
behaviour: [{
event: 'input change',
dirty: false,
validate: {
int: true,
max: function() {
return 100 + 100;
}
}
},
{
event: 'input change',
dirty: true,
validate: {
int: true,
min: {
element: $('#intField').find('.control__field').first(),
offset: 2
},
max: function() {
return 100 + 100;
}
}
},
{
event: 'blur',
main: true,
validate: {
int: true,
min: {
element: $('#intField').find('.control__field').first(),
offset: 2
},
max: function() {
return 100 + 100;
}
}
}
],
});
Show code
$('#floatField').ariaValidate({
behaviour: [{
event: 'input',
validate: {
digits: true,
float: true
}
},
{
event: 'blur',
main: true,
validate: {
float: true,
min: 10.5,
max: 99.5
}
}
],
});
Show code
$('#boolField').ariaValidate({
behaviour: [{
event: 'change',
validate: {
bool: true
}
}],
});
Show code
$('.js--radio-group').ariaValidate({
behaviour: [{
event: 'change input blur',
validate: {
required: true,
tokens: ['option1', 'option2']
}
}],
});
Show code
$('#date1Field').ariaValidate({
regionSettings: {
dateFormat: 'dmy'
},
behaviour: [{
event: 'change input',
main: true,
validate: {
required: true,
date: true
}
}],
});4
Show code
$('#date2Field').ariaValidate({
regionSettings: {
dateFormat: 'mdy'
},
behaviour: [{
event: 'blur',
main: true,
validate: {
required: true,
date: true,
minDate: '2016-11-22',
maxDate: '2040-10-01'
}
}],
});
Show code
$('#date3Field').ariaValidate({
regionSettings: {
dateFormat: 'ymd',
dateSeparator: '.'
},
behaviour: [{
event: 'blur',
main: true,
validate: {
required: true,
date: true,
}
}],
});
Show code
$('#date4Field').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
required: true,
date: true,
minDate: '2018-01-14',
maxDate: '2019-01-14'
}
}],
});
$('#date5Field').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
required: true,
date: true,
minDate: {
bindToElement: $('#date4Field').find('.control__field').first(),
fallbackDate: '2018-01-14', // if $('#date4Field') value is empty use this date as starting date to calculate offset
offset: 2, // valid dates starts two days after $('#date4Field') value
},
maxDate: {
bindToElement: $('#date4Field').find('.control__field').first(),
fallbackDate: '2018-01-14', // if $('#date4Field') value is empty use this date as starting date to calculate offset
offset: 365, // maximum day offset accepted is one year starting from $('#date4Field') value
}
}
}],
});
Show code
$('#date6Field').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
required: true,
date: true,
minDate: function() {
return new Date().setDate(new Date().getDate() + 3);
},
maxDate: function() {
return new Date().setDate(new Date().getDate() + 10);
}
}
}],
});
Show code
$('#emailField').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
required: true,
email: true
}
}],
});
Show code
$('#passwordField').ariaValidate({
behaviour: [{
event: 'blur ',
main: true,
validate: {
required: true,
password: true,
matchMain: $('#passwordRepeatField').find('.control__field').first()
}
},
{
event: 'passwordChange', //use custom event
dirty: true,
main: true,
validate: {
required: true,
password: true,
matchMain: $('#passwordRepeatField').find('.control__field').first()
}
}
],
});
$('#passwordRepeatField').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
required: true,
match: $('#passwordField').find('.control__field').first()
}
},
{
event: 'passwordChange', //use custom event
main: true,
dirty: true,
validate: {
required: true,
match: $('#passwordField').find('.control__field').first()
}
}
],
});
var passwd = $('#passwordField').find('.control__field').first(),
match = $('#passwordRepeatField').find('.control__field').first();
//Trigger custom events
match.on('blur', function() {
passwd.trigger('passwordChange');
});
passwd.on('blur', function() {
match.trigger('passwordChange');
});
Show code
$('#matchField').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
match: function() {
return 'hello';
}
}
}],
});
Show code
$('#tokensField').ariaValidate({
behaviour: [{
event: 'change blur',
validate: {
required: true,
tokens: ['one', 'two', 'three', 'four', 'five', 'six']
}
}],
});
Tokens (function)
Choose one option
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Show code
$('#tokensSelect').ariaValidate({
classes: {
fieldClass: 'js--control__select',
fieldErrorClass: 'control__select_error',
fieldValidClass: 'control__select_valid',
fieldClassElement: '.control__select'
},
behaviour: [{
event: 'change',
main: true,
validate: {
required: true,
tokens: function() {
return ['1', '2', '3', '4', '5', '6'];
}
}
}],
});
Show code
$('#customRegexField').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
customRegex: /ariaValidate/i
}
}],
});
Show code
$('#timeField').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
time: true
}
}],
});
Show code
$('#timeTextField').ariaValidate({
behaviour: [{
event: 'blur',
main: true,
validate: {
time: true
}
}],
});
Show code
$('#timeTextAMPMField').ariaValidate({
regionSettings: {
timeFormat: '12',
},
behaviour: [{
event: 'blur',
main: true,
validate: {
time: true
}
}],
});
Show code
var timeControl = $('#timeTextAMPMSelectField'),
timeField = timeControl.find('.control__field').first(),
ampm = $('#ampmSelect');
timeControl.ariaValidate({
regionSettings: {
timeFormat: '12',
},
behaviour: [{
event: 'blur ampmChange',
main: true,
validate: {
time: ampm
}
}],
});
ampm.on('change', function() {
timeField.trigger('ampmChange');
});