Jquery advance validations


// after seeing error when user start typing in the input box the message hides and border comes to original color 
$("#contest_title").keyup(function(){
   $("#contest_title_err").hide(0);
   $("#contest_title").css('border-color','#B2B2B4');
 });
 
 //call this method onclick of submit button
 function valid()
 {
 //check if contest title is not empty or you can use regular expression comparision also
		if($('contest_title').val == ''){
		$('contest_title_err').html('Please enter contest title');
		$('contest_title').css('border-color','#c43d3d');
		}
		else{
		$('contest_title_err').html('');
		$('contest_title').css('border-color','#B2B2B4');
		noerror[0] = 1;
		}
		
if(noerror[0] == 1 && so on for many fields)
			{
			return true;
			}
			else
			{
			return false;
			}
}



// the html for the fields is		
<input type="text" class="form-control" placeholder="Title" id="contest_title"  name="contest_title">
<label id="contest_title_err" class="message error"></label>

Advertisements

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