validation de formulaire Javascript

Question

actuellement j'ai un formulaire HTML avec validation javascript. Actuellement, les erreurs apparaissent dans un popup en utilisant la commande d'alerte .... comment je peux afficher les messages d'erreur à côté des zones de texte s'il vous plaît? Ci-dessous mon code actuel:

if (document.gfiDownloadForm.txtFirstName.value == '') { 
    alert('Please fill in all required fields'); 
    return false; 
} 

var filter = /^([a-zA-Z '-]+)$/i 
if (filter.test(document.gfiDownloadForm.txtFirstName.value) == false) { 
    alert('Please enter a valid First name'); 
    return false; 
} 

var filter = /^([a-zA-Z '-]+)$/i 
if (filter.test(document.gfiDownloadForm.txtLastName.value) == false) { 
    alert('Please enter a valid Last name'); 
    return false; 
} 


if (document.gfiDownloadForm.txtCompany.value == '') { 
    alert('Please enter a Company name'); 
    return false; 
} 

Answer 1

Vous aurez besoin d'ajouter des éléments de formulaire supplémentaires (probablement une portée car ils sont en ligne, plutôt que d'un div qui est un élément de bloc) pour contenir les messages d'erreur à côté de vos éléments de formulaire d'entrée et lui donner un identifiant pour que vous puissiez le référencer dans votre javascript. Quelque chose comme ceci:

<input type="text" id="txtFirstName" /><span id="firstNameError"></span> 

Puis dans votre code Javascript que vous souhaitez définir le innerHTML de cet élément de formulaire à votre message d'erreur si elle ne valide pas, ou à une chaîne vide si elle ne valide, comme donc:

if (filter.test(document.gfiDownloadForm.txtFirstName.value) == false) { 
    document.getElementById("firstNameError").innerHTML = 'Please enter a valid First name.'; 
    return false; 
} 
else { 
    document.getElementById("firstNameError").innerHTML = ''; 
    return true; 
} 

Answer 2

Vous devriez avoir un <div> ou <span> à côté du champ d'entrée, et au lieu d'une déclaration alert simplement définir le contenu du <div> au message d'erreur approprié.

par exemple.

if (document.gfiDownloadForm.txtCompany.value == '') { 
    document.getElementById('company_error').innerHTML = 'Please enter a company name'; 
    return false; 
}