Comment réparer ce script Javascript Validation de formulaire?

Question

J'utilise le javascript suivant pour la validation du formulaire:

<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> 

La forme:

<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> 

La validation fonctionne très bien, sauf qu'il affiche un message d'alerte après l'autre pour indiquer quels champs ont pas été rempli ou sélectionné.

Comment ce script peut être modifié de sorte que tous les champs manquants sont indiqués dans ONE boîte d'alerte comme:

S'il vous plaît remplir les champs suivants: Nom, sexe, âge, Termes et Conditions

Answer 1

Utilisez une chaîne ou un tableau (comme dans l'exemple ci-dessous) pour accumuler les champs d'erreur génèrent alors la déclaration d'alerte et la valeur retournée en fonction de son contenu. Par exemple:

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; 
} 

Answer 2

Vous ne devriez pas vraiment vous fier à la syntaxe document.form.Foo, donnez plutôt les identifiants des éléments et utilisez getElementById pour les sélectionner. Quoi qu'il en soit »

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; 
} 

Answer 3

Mieux vaut aller pour jQuery validation plugin. Il est facile, flexible, directe et très rapide à mettre en œuvre.

utiliser Sinon technique suggérée @ Evan.

Answer 4

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; 
} 

Un simple

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; 
}