Archive for the ‘ JQuery ’ Category

JQuery Visual Validation

Here is a great simple way to validate form elements have a value and change styles appropriately. This removes a style (which was a red border) when the input has a value on load, change and blur.

/* Events to control red borders around required fields that don't have a value */
$('.requiredField').each(function() { checkValueAndUpdateRedBorder($(this)) });
$('.requiredField').change(function() { checkValueAndUpdateRedBorder($(this)) });
$('.requiredField').blur(function() { checkValueAndUpdateRedBorder($(this)) });
function checkValueAndUpdateRedBorder(validatedItem) {
if (validatedItem.attr("value") != "") {
validatedItem.removeClass('requiredField');
} else {
validatedItem.addClass('requiredField');
}
}