I am a beginner in jQuery and I was wondering how to validate
the form before submission specifically for check boxes.
I am creating a simple check list form where my user would tick a check box if he finished that step. What I am planning to do is that,
the script would prevent
the form submission if there is an "unticked" checkbox and highlight it with a color.
Here's my code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>checkbox</title>
<style>
.error {
background-color:#F00;
}
.valid {
background-color:#0F0;
}
</style>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>
<script type="application/javascript">
function validateAll() {
$(".tick").change(function(){
if ($('.tick:checked').length == $('.tick').length) {
$('#container').removeClass();
$('#container').addClass('error');
} else {
$('#container').removeClass();
$('#container').addClass('valid');
}
});
}
</script>
</head>
<body>
<div id="container"><input class="tick" id="option1" type="checkbox"></div>
<div id="container"><input class="tick" id="option1" type="checkbox"></div>
<input id="button" type="button" onClick="validateAll();" value="check">
</body>
</html>
So what I am trying to do here is when
the user clicks
the button,
the script will highlight all
the unchecked check box with red and highlight all checked with green.
However, my script is not functioning. What is wrong with my script? Any suggestions on a more efficient way to do this?
