Code:
<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check box practice HTML</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
....I removed this part of the HTML for brevity.....
Do you agree to the terms above ? <br />
If so, please check the checkbox below.<h3>
<br />
<br />
<script type="text/javascript">
/* <![CDATA[ */
//code written by Eric Maddan
function validateForm(theForm)
{
var reason = "";
reason += validateCheckbox(theForm.chkBox);
if (reason != "") {
alert("Please fix the errors below!\n\n" + reason);
return false;
}
}
function validateCheckbox(el)
{
var error = "";
if (el.checked == false) {
error = "You didn't click the checkbox to confirm the rules listed above !";
}
return error;
}
</script>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<form name="terms" onsubmit="return validateForm(this);">
<input type="checkbox" name="chkBox" /> I accept the terms and conditions<br /><br />
<input type="submit" name="close" value="Enter Site" size="75" />
</form>
</body>
</html>
Try this.
I changed your button to a submit, and added an onsubmit argument to the form. Basically, when you press submit, the function in onsubmit will run. If it returns false (in the case of an error), the form won't submit... but if it returns true, the form will submit. The function checks another function that validates if the check box is pressed or not.
The advantage to my way is that you can add more validation functions (for other parts of a form, maybe) very easily.