Created
December 10, 2011 18:44
-
-
Save Ajnasz/1455919 to your computer and use it in GitHub Desktop.
yafov example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
// add custom method | |
$.yafov.addMethod('[type="tel"]', 'telfoobar', function (value, element, cb) { | |
// imagine that this is an ajax call, and the function is the callback | |
setTimeout(function () { | |
var isValid = value !== '123'; | |
cb(isValid); | |
}, 1000); | |
}); | |
$.yafov.setMessage('telfoobar', 'value shouldn\'t be 123'); | |
// add a custom group validator | |
// that going to handle 3 elements as one | |
$.yafov.addGroupMethod( | |
'.datetest', | |
'datetest', | |
/** | |
* that method will do the validation | |
* the elements variable will contain all elements of the group | |
* the elements are collected by the function what you need to pass as | |
* the 4th argument | |
* The value argument here doesn't make too much sense.. | |
*/ | |
function datetestGroupValiadator(value, elements, cb) { | |
// presume that the field is valid | |
var valid = true, | |
year, month, day, | |
date, now; | |
// check for the format of the fields, everything should be number | |
// you may wan't to make it more strict, but it's OK for now | |
elements.each(function () { | |
valid = valid && this.value !== '' && !isNaN(+this.value); | |
}); | |
// if the format is OK, check the actual value | |
if (valid) { | |
// get the values | |
year = elements.filter('.year').val(); | |
month = elements.filter('.month').val(); | |
day = elements.filter('.day').val(); | |
// create date objects what we will compare | |
date = new Date(); | |
now = new Date(); | |
// set year, month and day | |
date.setFullYear(year); | |
date.setMonth(month - 1); | |
date.setDate(day); | |
// compare the dates, if date.getTime() is greater then | |
// now.getTime() the entered date should be ok | |
valid = date.getTime() > now.getTime(); | |
} | |
cb(valid); | |
}, | |
/** | |
* collects all elements which belongs to the group | |
* has one parameter, which is the reference to a element from the | |
* group as a jQuery object | |
*/ | |
function datetestGetGroupItems(elem) { | |
// in that example we keep the elements of a group in a div which has a "row" class | |
var form = elem.form || elem.closest('.row'), | |
elements; | |
// collect all elements with datest class in the row div | |
elements = form.find('.datetest'); | |
return elements; | |
} | |
); | |
$.yafov.setMessage('datetest', 'The date must be later than today'); | |
// Initialize the validator | |
var validator = $('#NewTypes').yafov({ | |
// Example how you can overwrite the default onInvalidFound event | |
// handler with your own | |
// Added some logging then call the original one which will place the error messages | |
onInvalidFound: function (e, error) { | |
if (window.console && window.console.log) { | |
// window.console.log(error); | |
} | |
$.yafov.onInvalidFound(e, error); | |
} | |
}); | |
// Listen to formvalid event and submit the form | |
validator.bind($.yafov.events.FORM_VALID, function (e, args) { | |
// this.submit(); | |
$('#Messages').text('the form is valid').addClass('hasMessage'); | |
}); | |
// Listen to forminvalid and do nothing now :) You may wan't to log the issues | |
validator.bind($.yafov.events.FORM_INVALID, function (e, args) { | |
$('#Messages').text('the form is invalid').addClass('hasMessage'); | |
// scroll to the first invalid element | |
window.scrollTo(0, args.errors[0].field.parent().position().top - 10); | |
}); | |
// When user clicks on #TelValidate button only one validator method will | |
// be called only on one field and the callback will put a message into the | |
// Messages div | |
$('#TelValidate').click(function () { | |
$.yafov.validateWith($('#TelTest'), 'required', function (isValid) { | |
var msg = 'The tel field is valid'; | |
if (isValid) { | |
msg = 'The tel field is invalid'; | |
} | |
msg += '<br />Using the <code>$.yafov.validateWith</code> method, you can check if a field passes a (only one) validator method, but it won\'t trigger any events, you must handle everything in the callback method.'; | |
$('#Messages').html(msg).addClass('hasMessage'); | |
// scroll back to the message, so the user can see it | |
window.scrollTo(0, $('#Messages').closest('form').position().top); | |
}); | |
}); | |
// When user clicks on #ForceTelValidate button all validator methods will | |
// be called only on one field and the callback will put a message into the | |
// #Messages div | |
$('#ForceTelValidate').click(function () { | |
$.yafov.validate($('#TelTest'), function (result) { | |
var msg = 'The tel field is valid'; | |
if (result.isValid) { | |
msg = 'The tel field is invalid'; | |
} | |
msg += '<br />Using the <code>$.yafov.validate</code> method, you can check if a field passes all validations, and validfound or invalidfound events will be triggered.'; | |
$('#Messages').html(msg).addClass('hasMessage'); | |
// scroll back to the message, so the user can see it | |
window.scrollTo(0, $('#Messages').closest('form').position().top); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment