Border Umriss immer wieder auf Original eine Sekunde nach der Änderung in js

Question

Sie Hilfe wäre mit dieser einfachen, aber verblüffenden Frage geschätzt werden.

Ich habe ein Kontaktformular, auf dem der Benutzer klicken Sie auf Senden, wird eine kräftige Fehlerüberprüfungsfunktion ausführen Ich habe mich hart codiert. Bei der Fehlerprüfung wird um jedes Formularelement, das den Validierungstest nicht besteht, ein roter Rahmen angefügt, gefolgt von einem Warnhinweis, der dem Benutzer eine detaillierte Liste mit dem Fehlerort und dem Fehler mitteilt. Das alles funktioniert gut, außer dass der Rand jedes Formularelements rot ist. Es funktioniert für einen Bruchteil einer Sekunde, lange genug, um es zu sehen, bevor es seltsamerweise wieder auf die ursprüngliche Rahmenfarbe zurückfällt. Was zu Hölle ist hier los? Es ist, als gäbe es noch etwas, das diesen Code übertreibt ???

Ein weiteres Problem entdeckt ich auch gerade entdeckt, dass es den Benutzer nicht alarmieren, wie es, wenn alle boolean Kontrollvariablen sind wahr soll. Ich lief sogar alert(fnameCheck + ", " + lnameCheck + ", " + emailCheck + ", " + topicCheck + ", " + messageCheck + ", " + termsAndConsCheck); und die Warnung wurde gerade nicht angezeigt. Hier ist etwas los ... und ich glaube nicht, dass es diese Funktion ist. Ich könnte falsch sein, aber ich habe diese Funktion an anderer Stelle verwendet und es funktioniert (obwohl es weniger boolean Variablen mußte zu überprüfen)

Hier ist der 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> 

Hier alle JavaScript ist (alle es ist nicht relevant, aber es hier noch etwas anderes, das Problem sein kann, bei der Verursachung)

<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 + ".&nbsp;|&nbsp;"; 
    } 
} 
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 address\n"; 
     } 
    }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... \n\n" + 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> 

Answer 1

es sieht für mich wie es funktioniert, aber du bist nicht die Form von der Abgabe zu verhindern, wenn es Fehler gibt. Die Highlights geschehen, das Meldungsfenster erscheint, aber dann wird das Formular übermittelt und Sie verlieren alles.

Ihre Schaltfläche Ändern an:

<button type="button" onclick="submitForm()">Hi</button> 

Answer 2

Alles, was ich war

<button onclick="submitForm()">Hi</button> 

zu

<button type="button" onclick="submitForm()">Submit</button> 

für jedermanns Danke Hilfe, um die Linie tun musste ändern !!!