Category Archives: JQUERY length validation check

JQUERY length(empty) check -Form validation

This tutorial will show you how to validate the form . It simply checks whether the form elements like text, radio button i.e. the input type of the form are empty or not.
Step1: include the jquery file into your file
<script src=”js/jquery.js” type=”text/javascript”></script>

Step 2:Create a style(css) class .error in the header section
<!–
.error{
color:#F00;
background-color:#FF0;
}
–>?

How the Validation is done:

Here validation is done on blur event. On leaving the textbox if the textbox is empty then the class error is called.

Before length check:

After:(if left empty)

Here Goes the actual code:

<script type=”text/javascript” src=”js/jquery.js”></script>
<script>

$(function(){
$(‘:input’).blur(function() {
if ($(this).val().length == 0) {
$(this).addClass(‘error’);
}
});
$(‘:input’).focus(function() {
$(this)
.removeClass(‘error’)
.next(‘span’)
.remove();
});
});
</script>
<style>
}
.error{
color:#F00;
background-color:#FF0;

}
</style>
<form>
<input type=”text” name=”name”>
<br/>
<input type=”submit” name=”submit” value=”submit”>

</form>