Je travaille sur un script de validation de formulaire au travail et j'ai de la difficulté. Le formulaire est destiné à s'assurer que l'utilisateur remplit un nom, un e-mail réel, une catégorie (à partir de la liste déroulante) et une question:validation de formulaire javascript en ligne
Ceci nomme le formulaire et rassemble toutes les données depuis le formulaire :
<script>
function checkForm(form1) {
name = document.getElementById("FieldData0").value;
category = document.getElementById("FieldData3").value;
question = document.getElementById("FieldData1").value;
email = document.getElementById("FieldData2").value;
Ceci vérifie que quelque chose se trouve dans le champ "nom". Il fonctionne bien et valide exactement comme il se doit, affichant le texte d'erreur:
if (name == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("FieldData0").select();
document.getElementById("FieldData0").focus();
return false;
Cela fonctionne également comme il se doit. Il vérifie si le champ email est vide et si elle est vide, affiche un texte d'erreur et sélectionne ce champ:
} else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("FieldData2").select();
document.getElementById("FieldData2").focus();
return false;
}
Cela fonctionne aussi comme il se doit, fait en sorte que le champ des questions est pas vide:
else if (question == "") {
hideAllErrors();
document.getElementById("questionError").style.display = "inline";
document.getElementById("FieldData1").select();
document.getElementById("FieldData1").focus();
return false;
}
celui-ci fonctionne en partie - Si aucune chute est sélectionnée vers le bas, il affiche le message d'erreur, mais cela ne l'empêche pas la forme de la soumission, il ne fait qu'afficher le texte d'erreur alors que la forme présente:
else if (category == "") {
hideAllErrors();
document.getElementById("categoryError").style.display = "inline";
document.getElementById("FieldData3").select();
document.getElementById("FieldData3").focus();
return false;
}
Celui-ci ne fonctionne pas du tout, peu importe où je l'ai mis. J'ai utilisé une variante sur le même script la semaine dernière et ça a bien fonctionné. Ceci est censé vérifier que le message est entré ressemble à une véritable adresse e-mail:
else if (!check_email(document.getElementById("FieldData1").value)) {
hideAllErrors();
document.getElementById("emailError2").style.display = "inline";
document.getElementById("FieldData2").select();
document.getElementById("FieldData2").focus();
return false;
}
Otherwise it lets the form submit:
return true;
}
Ceci vérifie l'e-mail sur:
function check_email(e) {
ok = "1234567890qwertyuiop[][email protected]_QWERTYUIOPASDFGHJKLZXCVBNM";
for(i=0; i < e.length ;i++){
if(ok.indexOf(e.charAt(i))<0){
return (false);
}
}
if (document.images) {
re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/;
re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (!e.match(re) && e.match(re_two)) {
return (-1);
}
}
}
Cette fonction cache toutes les erreurs afin que l'utilisateur ne soit pas bombardée avec du texte rouge. J'ai essayé de mettre en "document.getElementById (" emailError ") none "" mais qui brise la chose style.display =.":
function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("categoryError").style.display = "none"
document.getElementById("questionError").style.display = "none"
}
</script>
Et la forme ressemble à ceci:
<form onSubmit="return checkForm();" method="post" action="http://www.emailmeform.com/fid.php?formid=303341io4u" name="form1">
<p><div class=error id=nameError>Required: Please enter your name<br/></div><p><strong>Name:</strong> <span></span><br><input type="text" name="FieldData0" id="FieldData0" value="" size="22" tabindex="1" />
<label for="name"></label></p>
<p><div class=error id=emailError>Required: Please enter your email address<br/></div>
<div class=error id=nameError2>This doesn't look like a real email address, please check and reenter<br/></div>
<strong><p>Email:</strong> <span>(will not be published)</span><br><input type="text" name="FieldData2" id="FieldData2" value="" size="22" tabindex="2" />
<label for="email"></label>
</p>
<div class=error id=categoryError>Please select a category from the drop-down menu<br></div>
<p><strong>Category:</strong> <span></span><br>
<p><select id="FieldData3" name="FieldData3">
<option value="">Please select a category</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="other">Other</option>
</select><label for="category"></label>
<p><div class=error id=questionError>Please type your question in the box below:<br></div><label for="question"><strong><p>Your Question:</strong> <span></span></label><br>
<textarea name="FieldData1" id="FieldData1" cols="50" rows="10"></textarea></p>
<p><input type="submit" class="btn" value="Submit Question" name="Submit"></p>
</div>
</form>
Le problème est-il l'ordre que j'exécute les vérifications? Je n'arrive pas à comprendre cela. Toute aide serait appréciée.
Merci pour cette réponse si complète. Je vais prendre votre conseil à cœur. –
Vous êtes les bienvenus. Codage heureux! – brianpeiris