votre aide serait appréciée avec cette question simple mais ahurissante.
J'ai un formulaire de contact sur lequel l'utilisateur cliquesoumettre, exécutera une fonction de vérification d'erreur vigoureuse que j'ai moi-même codée en dur. La vérification des erreurs appliquera une bordure rouge autour de chaque élément de formulaire qui ne réussit pas le test de validation, suivi d'une alerte contextuelle indiquant à l'utilisateur une liste détaillée de l'emplacement de l'erreur et de sa nature. Tout cela fonctionne bien, sauf pour la bordure de chaque élément de formulaire étant définie sur rouge. Cela fonctionne pendant une fraction de seconde, assez longtemps pour que vous puissiez voir, avant de revenir étrangement à la couleur de bordure d'origine. Que se passe-t-il sur Terre ? C'est comme s'il y avait autre chose outrepasser ce code ???
Un autre problème découvert
Je viens également de découvrir qu'il n'alerte pas l'utilisateur comme il est censé le faire lorsque toutes les variables de vérification booléennes sont vraies. J'ai même exécuté ceci alert(fnameCheck + ", " + lnameCheck + ", " + emailCheck + ", " + topicCheck + ", " + messageCheck + ", " + termsAndConsCheck); et l'alerte ne s'est tout simplement pas affichée.Il se passe quelque chose ici... et je ne pense pas que ce soit cette fonction. Je peux me tromper mais j'ai utilisé cette fonction ailleurs et cela a fonctionné (même s'il y avait moins de variables booléennes à vérifier)
Voici le code ...
<div class="body" style="height:560px"> <!-- This is the body --><br />
<span style="font-size:50px">Contact Us</span><br />
<div style="margin-left:20px; text-align:left">
Please feel free to enter your details below to contact us.<br />
<span style="font-size:14px; color:grey">* = required field</span><br /><br />
<form name="contactForm"> <!-- This is a form -->
First name*:<br />
<input name="fname" type="text"><br />
Last name*:<br />
<input name="lname" type="text"><br />
Email*: <br /><input name="email" type="text"><br /><br />
My comment/ enquiry concerns*:<br />
<select id="topic">
<option value="Select a topic" selected>Select a topic</option>
<option value="Billing Questions">Billing Questions</option>
<option value="Returns/ Exchanges">Returns/ Exchanges</option>
<option value="Website Enquiries">Website Enquiries</option>
<option value="Product Enquiries">Product Enquiries</option>
<option value="Other">Other</option>
</select><br /><br />
Message*:<br /><textarea id="message"></textarea>
<br /><br />
If you"d like to send us a file, you may do so below but ensure that the file is no larger than 50MB.
<br /><input type="file" name="myFile">
<br><br />
You agree to the Privacy Policy (click to confirm)*.
<input name="tandc" type= "checkbox"><br /><br />
<button onclick="submitForm()">Hi</button>
<input type="reset" value="Reset">
</form>
</div>
</div>
Voici TOUT le Javascript (tout n'est pas pertinent, mais il peut y avoir autre chose ici à l'origine du problème)
<script>
document.getElementById("cover").style.display = "none";
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==" ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var username="";
function checkCookie() {
username = getCookie("username");
if (username != "") {
document.getElementById("topnavbar").innerHTML = "Welcome, " + username + ". | ";
}
}
checkCookie();
/* THIS IS THE RELEVANT STUFF FROM HERE DOWN TO THE NEXT COMMENT */
var topic = "Select a topic";
document.getElementById("topic").addEventListener("change", function() {
switch(this.value){
case "Select a topic":
topic = "Select a topic"
break;
case "Billing Questions":
topic = "Billing Questions"
break;
case "Returns/ Exchanges":
topic = "Returns/ Exchanges"
break;
case "Website Enquiries":
topic = "Website Enquiries"
break;
case "Product Enquiries":
topic = "Product Enquiries"
break;
case "Other":
topic = "Other"
break;
}
});
function submitForm(){
var firstName = contactForm.fname.value;
var lastName = contactForm.lname.value;
var email = contactForm.email.value;
var message = contactForm.message.value;
var fnameCheck = false;
var lnameCheck = false;
var emailCheck = false;
var topicCheck = false;
var messageCheck = false;
var termsAndConsCheck = false;
var errorMsg = "";
if(isNaN(firstName)&&firstName!=""){
fnameCheck = true;
}else{
fnameCheck = false;
if(fnameCheck == ""){
errorMsg += "First Name - The field is empty n";
}else{
errorMsg += "First Name - Please ensure it contains no numbers or symbols n";
}
}
if(isNaN(lastName)&&lasttName!=""){
lnameCheck = true;
}else{
lnameCheck = false;
if(lnameCheck == ""){
errorMsg += "Last Name - The field is empty n";
}else{
errorMsg += "Last Name - Please ensure it contains no numbers or symbols n";
}
}
if(email.indexOf("@") == -1 || email == ""){
emailCheck == false;
if(email == ""){
errorMsg += "Email - The field is empty n";
}else{
errorMsg += "Email - This is not a valid email addressn";
}
}else{
emailCheck = true;
}
if(topic == "Select a topic"){
topicCheck = false;
errorMsg += "Topic - Please select a topic n";
}else{
topicCheck = true;
}
if(message == ""){
messageCheck = false;
errorMsg += "Message - Please enter a message n";
}else{
messageCheck = true;
}
if(!contactForm.tandc.selected){
termsAndConsCheck = false;
errorMsg += "Terms and Conditions - Please tick the checkbox n";
}else{
termsAndConsCheck = true;
}
if(fnameCheck && lnameCheck && emailCheck && topicCheck && messageCheck && termsAndConsCheck){
alert("form submitted!");
}else{
if(!fnameCheck){
contactForm.fname.style.borderColor = "red";
}
if(!lnameCheck){
contactForm.lname.style.borderColor = "red";
}
if(!emailCheck){
contactForm.email.style.borderColor = "red";
}
if(!topicCheck){
document.getElementById("topic").style.borderColor = "red";
}
if(!messageCheck){
contactForm.message.style.borderColor = "red";
}
if(!termsAndConsCheck){
contactForm.tandc.style.outline = "1px solid red";
}
alert("Please fix the fields listed below... nn" + errorMsg + "nThank you.");
}
}
/* THIS IS THE END OF THE RELEVANT CODE */
</script>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);
$(".item").hover(function() {
$("#slider").stop();
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});
$(".item").on("mouseout", function() {
$("#slider").stop();
$("#slider").animate({
"left": $("#four").position().left + "px",
"width": $("#four").width() + "px"
}, 500);
});
});
</script>
Réponses:
1 pour la réponse № 1Tout ce que j'avais à faire était de changer la ligne
<button onclick="submitForm()">Hi</button>
à
<button type="button" onclick="submitForm()">Submit</button>
Merci pour l'aide à tous !!!
0 pour la réponse № 2
Il me semble que cela fonctionne, mais vous ne l'êtes pasempêcher l'envoi du formulaire s'il y a des erreurs. Les faits saillants se produisent, la boîte de message apparaît, mais le formulaire est ensuite soumis et vous perdez tout.
Changez votre bouton pour :
<button type="button" onclick="submitForm()">Hi</button>