Validating checkbox using JQuery Events

Checkbox is most frequently used in signup form for agreeing to Terms and Conditions .
Here is the Demo
I Agree to Terms & Conditions

If checkbox is not checked and signup button is clicked

Message should display asking the user to agree to terms and conditions by clicking the checkbox. At the same time the border around the checkbox should change to red colour to draw attention of the user.

Any time the user check the Checkbox the error message should vanish and display the OK or tick image. At the same time the Red colour border around the checkbox should vanish.

You can read more about validation of other input types and here only the checkbox part is shown.

JQuery

<script>
$(document).ready(function() {
///////
my_function_terms=function my_function_terms(status,str){
if(status=='NOTOK'){
	$('#terms1').css({"border-color": "red", 
             "border-width":"1px", 
             "border-style":"solid"});

}else{
$('#terms1').css({'border-color': '',"border-width":"0px"});
}
$('#msg_terms').html(str);
}
///////
///////// Terms & conditions //////////
$("#terms").change(function(){
 var ckb_status = $("#terms").prop('checked');
if(ckb_status){
	my_function_terms("OK"," Thanks ........");
	}
else{
	my_function_terms("NOTOK","You must agree to terms and conditions ");
	}
});
//////// End of terms and condtions //////  
$("#b1").click(function(event){
 var ckb_status = $("#terms").prop('checked');
 if(ckb_status){
	my_function_terms("OK","Thanks .. ");
	}
else{
	my_function_terms("NOTOK","You must agree to terms and conditions ");
	}
//////
// Other input elements with status. 
////	
	
})
////////////////////////////////
})
</script>

HTML

<table class='table'>
<tr><td ><span class='form-group' id=terms1> <input type=checkbox value=yes name='terms1' id='terms'>
    I Agree to <a href='#' >Terms & Conditions</a> </span> </td><td> <div id=msg_terms name=msg_terms></div> </td></tr>
<tr><td colspan=2><input type=button id=b1 class=b1 value='Signup'></td>  </tr>	
</table> 
Your Rating




Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer