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 your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer