How to fix this Javascript Form Validation script?

I am using the following javascript for form validation:

<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 )
        {
          开发者_JAVA百科      alert ( "Please check the Terms & Conditions box." );
                valid = false;
        }

        return valid;
}
</script>

The form:

<form name="contact_form" method="post" action="somepage.php" 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
&nbsp; <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>

The validation works fine, except it displays one alert box after another to point out which fields haven't been filled in or selected.

How can this script be modified so that all the missing fields are pointed out in ONE alert box like:

Please fill in the following fields: Name, Gender, Age, Terms and Conditions

Use a string or an array (as in the example below) to accumulate the error fields then generate the alert statement and return value based on its contents. For example:

function validate_form () {
  var invalid=[], form=document.contact_form;
  if (form.contact_name.value == "") {
    invalid.push('Name');
  }
  if ((form.gender[0].checked == false) && (form.gender[1].checked == false)) {
    invalid.push('Gender');
  }
  if (form.age.selectedIndex == 0) {
    invalid.push('Age');
  }
  if (form.terms.checked == false) {
    invalid.push('Terms and Conditions');
  }
  if (invalid.length > 0) {
    alert('Please fill in the following fields: ' + invalid.join(', ') + '.');
    return false;
  }
  return true;
}

function validate_form ( )
{
    valid = true;
    var myArray= new Array();

        if ( document.contact_form.contact_name.value == "" )
        {
                myArray.push('Name');
                valid = false;
        }

        if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )
        {
                myArray.push('Gender');
                valid = false;
        }

        if ( document.contact_form.age.selectedIndex == 0 )
        {
                myArray.push('Age');
                valid = false;
        }

        if ( document.contact_form.terms.checked == false )
        {
                myArray.push('Term & Conditions');
                valid = false;
        }
        if (valid==false)
             alert ( "Please fill in the following fields: "+myArray);
        return valid;
}

Simple one

function validate_form ( )
{
    var myArray= new Array();
        if ( document.contact_form.contact_name.value == "" )
              myArray.push('Name');
        if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )
              myArray.push('Gender');
        if ( document.contact_form.age.selectedIndex == 0 )
              myArray.push('Age');
        if ( document.contact_form.terms.checked == false )
                myArray.push('Term & Conditions');
        if (myArray.length>=0){
             alert ( "Please fill in the following fields: "+myArray);
             return false;
    }
        return true;
}

You shouldn't really rely on document.form.Foo syntax, rather, give the elements id's and use getElementById to select them. Anyway"

function validate_form(){
    var valid = true,
        errors = [];

    if (document.contact_form.contact_name.value == "") {
        error.push("Please fill in the 'Your Name' box.");
        valid = false;
    }

    if ((document.contact_form.gender[0].checked == false) && (document.contact_form.gender[1].checked == false)) {
        errors.push("Please choose your Gender: Male or Female");
        valid = false;
    }

    if (document.contact_form.age.selectedIndex == 0) {
        errors.push("Please select your Age.");
        valid = false;
    }

    if (document.contact_form.terms.checked == false) {
        errors.push("Please check the Terms & Conditions box.");
        valid = false;
    }

    if(errors.length > 0){
        alert('Errors:\n' + errors.join('\n'));
    }

    return valid;
}

Better to go for jQuery validation plugin. It easy, flexible, straight forward and very fast to implement.

Otherwise use @Evan suggested technique.