Span verschwinden bei senden

Question

Ich wurde gebeten, ein einfaches Formular mit JavaScript-Prüfcode zu erstellen. Ich habe das gesamte Formular erstellt, und alle Validierungsskripte funktionieren. Ich wurde jedoch aufgefordert, alle relevanten Fehler in Span-Tags neben dem entsprechenden Feld anzuzeigen (im Gegensatz zur Anzeige von Warnungen, wie ich es gewohnt bin).

Mir wurde gesagt, dass ich neben jedem Element eine Textmarke haben soll, wie Texteingabe, Optionsfeld usw. mit dem entsprechenden zuvor eingegebenen Fehlertext, und style jeden Bereich so, dass sie ausgeblendet sind. Wenn der Submit-Button gedrückt wird, soll das Skript den Stil des entsprechenden Bereichs in Sichtbar ändern, um den Text anzuzeigen. Ich habe den Code dafür geschrieben, aber das Problem, das ich habe, ist, dass meine Span-Fehler sichtbar werden, aber fast augenblicklich verschwinden sie in den versteckten Zustand. Gibt es einen bestimmten Grund, warum dies passieren könnte?

Hier ist ein Teil meines Codes.

HTML:

< input type="checkbox" name="agree"/> < span id="agreeSpan>Error text< /span> 

CSS:

span { 
color:red; 
font-size:small; 
visibility:hidden; 
} 

Und das JavaScript:

function validateAgreement() 
    { 

    var agreeBox = document.registration.agree; 
    var agreeSpan = document.getElementById('agreeSpan'); 

    if (!agreeBox.checked) { 
     agreeSpan.style.visibility = 'visible'; 
     return false; 
    } 

Bin ich etwas fehlt offensichtlich? Ist es möglich, dass ich versuche, 1 bestimmten Bereich zu stylen und dass das Styling-Attribut für die allgemeinen span-Tags diesen bestimmten überschreibt?

Vielen Dank und Entschuldigung, wenn dies eine Anfängerfrage ist! Ich bin neu in JS :)

Answer 1

eingegeben, um den Absenden passiert, Rückkehr falsch aufhören ist nicht genug. Es hängt davon ab, wie Sie diese Funktion anrufen, die ich mir vorstellen so etwas wie dies die Rückkehr

<form action='blah' onsubmit='return validateAgreement();'> 
... 
</form> 

Hinweis

ist. Der on submit-Handler muss false zurückgeben, also müssen Sie sicherstellen, dass Sie den Wert zurückgeben, den Ihre Funktion zurückgibt. Wenn Sie gerade ...

<form action='blah' onsubmit='validateAgreement();'> 
... 
</form> 

dann Ihr Formular wird immer gesendet werden.

Answer 2

in Ihrem HTML-Code, Sie haben sich um den Schlusskurs verpasst id Es sollte id="agreeSpan" gewesen sein, aber sie haben id="agreeSpan