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');
}
}
Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: