Test de données de formulaire et renvoi d'un seul message d'erreur (Javascript)

Question

Je dois créer un formulaire et vérifier que des données y ont été saisies (pas nécessairement des données précises) avant de soumettre le formulaire. J'ai été capable de le faire avec des messages séparés pour chaque champ, mais je dois pouvoir le faire pour que tous les champs manquants s'affichent dans un seul message d'erreur (IE "Il vous manque le nom et l'adresse et ...") . Quelqu'un peut-il m'aider s'il vous plaît. Merci d'avance pour vos commentaires.

<FORM onSubmit='return checkForm()' NAME='customerform'> 
<TABLE WIDTH=100% BORDER=1> 
<TR><TD>First Name: <INPUT TYPE='TEXT' NAME='firstname'></TD> 
<TD ALIGN=RIGHT> Last Name: <INPUT TYPE='TEXT' NAME='lastname'></TD></TR> 
<TR><TD COLSPAN=2>Address: <INPUT TYPE='TEXT' NAME='address' size =50></TD></TR> 
<TR><TD>City: <INPUT TYPE='TEXT' NAME='city'></TD> 
<TD ALIGN=RIGHT>State: <INPUT TYPE='TEXT' NAME='state' size=3> Zip: <INPUT TYPE='TEXT' NAME='zip' size=6></TD> 
<TR><TD COLSPAN=2>Email Address: <INPUT TYPE='TEXT' NAME='emailaddr' size=50></TD></TR> 
<TR><TD><INPUT TYPE='submit' value='Submit'></TD> 
<TD ALIGN=RIGHT><INPUT TYPE='reset'></TD></TR> 
</TABLE></FORM> 




function checkForm() 
{ 

var data = document.customerform.firstname.value 
    if (data.length <= 0) { 
    alert("Please enter your first name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.lastname.value 
    if (data.length <= 0) { 
    alert("Please enter your last name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.address.value 
    if (data.length <= 0) { 
    alert("Please enter your address, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.city.value 
    if (data.length <= 0) { 
    alert("Please enter your city name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.state.value 
    if (data.length <= 0) { 
    alert("Please enter your state name, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.zip.value 
    if (data.length <= 0) { 
    alert("Please enter your zip code, it is required for us to process your order.") 
    return false 
    } 

data = document.customerform.emailaddr.value 
    if (data.length <= 0) { 
    alert("Please enter your email, it is required for us to process your order.") 
    return false 
    } 

} 

Answer 1

Votre code a return false après chaque contrôle, si on échoue, vous ne passez au reste des contrôles. Vous devez vérifier tous les éléments et conserver un enregistrement de ceux (le cas échéant) qui échouent à la validation, puis écrire un seul message à leur sujet. Maintenant, comme je l'ai mentionné dans mon commentaire ci-dessus, votre code n'est pas sans rappeler le code de 2000 et a besoin de beaucoup de mises à jour pour suivre les normes modernes et les meilleures pratiques.

Voir les commentaires dans le code pour plus de détails:

// Get references to each element you'll want to work with: 
 
var frm = document.querySelector("form"); 
 

 
// Set up event handlers the modern way and not via inline HTML event attributes 
 
frm.addEventListener("submit", checkForm); 
 

 
function checkForm(evt){ 
 
    var items = []; // Array to hold data-id's of invalid elements 
 
    
 
    // Loop through the form elements 
 
    for(var i = 0; i < frm.elements.length; i++){ 
 
    // Check the element for no value 
 
    if(frm.elements[i].value === ""){ 
 
     // If it has no value, put its custom data-id attribute value into the array 
 
     items.push(frm.elements[i].dataset.id); 
 
    } 
 
    } 
 
    
 
    // Check for errors and display message: 
 
    if(items.length > 0){ 
 
    // Cancel the form's submission 
 
    evt.preventDefault(); 
 
    // Turn all array items into a string, separated with commas and spaces 
 
    // but remove the last comma and space. 
 
    alert("You must provide entries for:\n" + items.join(", ").slice(0, -2)); 
 
    } 
 
}

/* Use CSS for styling, not HTML*/ 
 
#address, #emailAddr { width:25em; } 
 
#state { width:3em; } 
 
#zip { width:6em; } 
 

 
label.left { 
 
    display:inline-block; 
 
    width:100px; 
 
} 
 

 
/* Just for fun: */ 
 
.row { 
 
    margin-bottom:.5em; 
 
} 
 

 
input[type=text] { 
 
    box-shadow:0 0 1px green; 
 
} 
 

 
input[type=text]:focus { 
 
    box-shadow:0 0 1px blue; 
 
}

<!-- While HTML 5 can be written in any case you like, most would agree that 
 
    lower-case is easier to read. Next, don't use tables for layout, that's 
 
    the job of CSS. Also, use the <label> element for better accessibility. 
 
    But, most importantly here, if we use data-* attributes on the form 
 
    elements, we can store a custom string that can be used later. In our 
 
    case, in the error messages. Take note of how clean the HTML is now 
 
    that the styling and JavaScript have been removed from it. --> 
 
<form name='customerform' action='#' method=''> 
 
    <div class="row"> 
 
    <label for="firstName" class="left">First Name: </label> 
 
    <input type='text' name='firstName' id="firstName" data-id="First Name"> 
 
    <label for="lastName">Last Name: </label> 
 
    <input type='text' name='lastName' data-id="Last Name"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="address" class="left">Address: </label> 
 
    <input type='text' name='address' id="address" data-id="Street Address"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="city" class="left">City: </label> 
 
    <input type='text' name='city' id="city" data-id="City"> 
 
    <label for="state">State: </label> 
 
    <input type='text' name='state' id="state" data-id="State"> 
 
    <label for="zip">Zip: </label> 
 
    <input type='text' name='zip' id="zip" data-id="Zip Code"> 
 
    </div> 
 
    <div class="row"> 
 
    <label for="emailAddr" class="left">Email Address: </label> 
 
    <input type='text' name='emailAddr' id="emailAddr" data-id="Email Address"> 
 
    </div> 
 
    <div class="row"> 
 
    <input type='submit' value='Submit'> 
 
    <input type='reset'> 
 
    </div> 
 
</form>