Source of complex_form.html
<html>
<head>
<title>A More Complex Form with JavaScript Validation</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
valid = false;
}
if ( document.contact_form.age.selectedIndex == 0 )
{
alert ( "Please select your Age." );
valid = false;
}
if ( document.contact_form.terms.checked == false )
{
alert ( "Please check the Terms & Conditions box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="contact_form" method="post" action="/cgi-bin/articles/development/javascript/form-validation-with-javascript/contact_complex.cgi" onSubmit="return validate_form ( );">
<h1>Please Enter Your Details Below</h1>
<p>Your Name: <input type="text" name="contact_name"></p>
<p>Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female</p>
<p>Your Age:
<select name="age">
<option value="">Please Select an Option:</option>
<option value="0-18 years">0-18 years</option>
<option value="18-30 years">18-30 years</option>
<option value="30-45 years">30-45 years</option>
<option value="45-60 years">45-60 years</option>
<option value="60+ years">60+ years</option>
</select>
<p>Do you agree to the Terms and Conditions?
<input type="checkbox" name="terms" value="Yes"> Yes
<p><input type="submit" name="send" value="Send Details"></p>
</form>
</body>
</html>