Einfache JavaScript-Validierung funktioniert nicht?

Nicht sicher, warum dies nicht funktioniert.Einfache JavaScript-Validierung funktioniert nicht?

<!DOCTYPE html> 

<html> 
<head> 
    <title>Player 1</title> 
    <link rel="stylesheet" type="text/css" href="playerOne.css"> 
</head> 
<body> 
    <div id="heading"> 
     <h>Player 1</h> 
    </div> 
    <form name="playerInfo" onsubmit="return validate()" method="post"> 
    <hr> 
     <fieldset> 
      <legend>Personal information:</legend> 
      <label id="inPID">Player ID:</label> 
      <br> 
      <input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus > 
      <br> 
      <br> 
      <label id="inFN">First name:</label> 
      <br> 
      <input type="text" name="firstname" class="input" id="fname" placeholder="First name" > 
      <br> 
      <br> 
      <label id="inLN">Last name:</label> 
      <br> 
      <input type="text" name="lastname" class="input" id="sname" placeholder="Last name" > 
      <br> 
      <br> 
      <label id="inEA">Email address:</label> 
      <br> 
      <input type="text" name="email" class="input" id="email" placeholder="Email address"> 
      <br> 
      <br> 
      <label id="inPW">Password:</label> 
      <br> 
      <input type="password" name="password" class="input" id="pass" > 
      <br> 
      <br> 
      <input type="submit" value="Validate" class="input" id="validate" > 

     </fieldset> 
    <hr> 
    </form> 
    <div id="error"></div> 

    <script> 
    function testVal(){ 
     return false; 
    } 


    function validate() { 
     var message; 
     var test = true; 
     message = document.getElementById("error"); 
     message.innerHTML += ""; 

     var x = document.getElementById("id"); 
     if(x.value == ""|| x.value == null||x.value== "Player ID") { 
      x.style.backgroundColor = "#FF0000"; 
      message.innerHTML += "Player ID is missing\n"; 
      test = false; 
     }else{ 

     } 
     var x = document.getElementById("fname"); 
     if(x.value == ""){ 
      x.style.borderColor = "#FF0000"; 
      message.innerHTML += "First name is missing\n"; 
      test = false; 
     }else{ 

     } 
     var x = document.getElementById("sname"); 
     if(x.value == "") { 
      x.style.borderColor ="#FF0000"; 
      message.innerHTML += "Surname is missing\n"; 
      test = false; 
     }else{ 

     } 
     var x = document.getElementById("email"); 
     if(x.value == "") { 
      x.style.borderColor = "#FF0000"; 
      message.innerHTML += "Email is missing\n"; 
      test = false; 
     }else{ 

     } 
     var x = document.getElementById("pass"); 
     if(x.value == ""){ 
      x.style.borderColor = "#FF0000"; 
      message.innerHTML += "Password is missing\n"; 
      test = false; 
     }else{ 

     } 
     return test; 
    } 
    </script> 

</body>

So soll es die Farbe der Grenzen zu rot, wenn die Eingabe falsch (oder leer) ist, und den Benutzer in einem div informieren. Aus irgendeinem Grund wird der Code immer gesendet, ohne die Fehler zu erkennen. Ich bin auch ein Anfänger bei JavaScript (und HTML), also wenn jemand irgendeinen Beitrag zur Verbesserung dieses Codes hat, würde ich es schätzen.

EDIT: Entschuldigung. Ich habe die falsche Version des Codes hochgeladen, die testval-Funktion war nur da, um zu überprüfen, ob der onsubmit korrekt funktioniert hat, und die Validierungsfunktion heißt jetzt onsubmit, wo/wann es sein sollte, aber nicht funktioniert.

EDIT 2: Vielen Dank für Ihre Hilfe zum Format und zur korrekten Verwendung des Tags. Ich habe es nach Ihren Empfehlungen bearbeitet, jedoch funktioniert die eigentliche Validierung (Funktion) immer noch nicht, trotz der Einbeziehung von Anführungszeichen.

Referenzen:

http://www.w3schools.com/js/js_validation.asp

http://www.tutorialspoint.com/javascript/javascript_form_validations.htm

Quelle

2016-04-03 Justin Michel

anzeigen Quellcode 'testVal' Funktion –

testVal gibt nur falsche –

Sie haben einen Tippfehler' retrun' –

Sie gaben den gleichen Namen x für JavaScript-Variablen. Ich habe auch deine Form ein wenig repariert.

Einige Vorschläge:

Die \n in a.innerHTML += "Some string\n" funktioniert nicht. Verwenden Sie "<br />" statt
Verschiedene Namen für verschiedene Variablen bitte
Verwenden Sie das placeholder Attribut statt value dem Benutzer
Verwenden message Variable vorzuschlagen, um die Fehlermeldung zu halten, anstatt die innerHtml direkt der Einstellung, da Javascript Pass nach Wert verwendet (siehe reference)
Wenn Sie mehr mit Javascript vertraut sind, möchten Sie lernen, jQuery. Es bietet eine großartige API für eine einfachere Zeitcodierung und macht Html Traversal, Event Handling und Ajax viel einfacher. http://www.w3schools.com/jquery/default.asp ist ein großartiger Ort, um jQuery zu lernen.

Fest Javascript und Html:

function validate() { 
 
    var message = ""; 
 
    var test = true; 
 

 
    var id = document.getElementById("id"); 
 
    if (id.value == "" || id.value == null) { 
 
    id.style.backgroundColor = "#FF0000"; 
 
    message += "Player ID is missing<br />"; 
 
    test = false; 
 
    } else { 
 

 
    } 
 
    var fname = document.getElementById("fname"); 
 
    if (fname.value == "" || fname.value == null) { 
 
    fname.style.borderColor = "#FF0000"; 
 
    message += "First name is missing<br />"; 
 
    test = false; 
 
    } else { 
 

 
    } 
 
    var sname = document.getElementById("sname"); 
 
    if (sname.value == "" || sname.value == null) { 
 
    sname.style.borderColor = "#FF0000"; 
 
    message += "Surname is missing<br />"; 
 
    test = false; 
 
    } else { 
 

 
    } 
 
    var email = document.getElementById("email"); 
 
    if (email.value == "" || email.value == null) { 
 
    email.style.borderColor = "#FF0000"; 
 
    message += "Email is missing<br />"; 
 
    test = false; 
 
    } else { 
 

 
    } 
 
    var x = document.getElementById("pass"); 
 
    if (x.value == "" || x.value == null) { 
 
    x.style.borderColor = "#FF0000"; 
 
    message += "Password is missing<br />"; 
 
    test = false; 
 
    } else { 
 

 
    } 
 
    if (test == true) { 
 
    document.alert("OK"); 
 
    // document.getElementById("frmPlay").submit(); 
 
    } else { 
 
    document.getElementById("error").innerHtml = message; 
 
    } 
 
}

<form name="playerInfo" onsubmit="validate()" method="post" id="frmPlay"> 
 
    <hr> 
 
    <fieldset> 
 
    <legend>Personal information:</legend> 
 
    <label>Player ID:</label> 
 
    <br> 
 
    <input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus> 
 
    <br> 
 
    <br> 
 
    <label>First name:</label> 
 
    <br> 
 
    <input type="text" name="firstname" class="input" id="fname" placeholder="First name"> 
 
    <br> 
 
    <br> 
 
    <label>Last name:</label> 
 
    <br> 
 
    <input type="text" name="lastname" class="input" id="sname" placeholder="Last name"> 
 
    <br> 
 
    <br> 
 
    <label>Email address:</label> 
 
    <br> 
 
    <input type="text" name="email" class="input" id="email" placeholder="Email address"> 
 
    <br> 
 
    <br> 
 
    <label>Password:</label> 
 
    <br> 
 
    <input type="password" name="password" class="input" id="pass"> 
 
    <br> 
 
    <br> 
 
    <input type="submit" value="Validate" class="input" id="validate"> 
 

 
    </fieldset> 
 
    <hr> 
 
</form> 
 

 
<div id="error"></div>

Quelle

2016-04-03 15:05:04

Ich schätze das Reparieren –

@JustinMichel funktioniert es jetzt? Wenn ja, bitte markieren Sie meine Antwort akzeptiert, danke. Wenn nicht, sag mir, was passiert ist –

Leider funktioniert es immer noch nicht so, als ob es keine Fehler gibt –

Schauen Sie sich Ihre Konsole Fehler.

Zuerst ist ein Tippfehler in TestVal - "retrun" anstelle von "return".

Als nächstes müssen Strings so x.style.borderColor = #FF0000; Bedürfnisse zitiert werden x.style.borderColor = "#FF0000";

Darüber hinaus sein, Sie scheinen nicht wirklich validate() im Code zur Verfügung gestellt zu rufen. Schauen Sie sich auch das placeholder-Attribut für input-Elemente an, oder - möglicherweise passender - das label-Element, anstatt Ihren Ansatz, das Etikett in den Wert jedes Eingangs zu setzen.

Quelle

2016-04-03 15:01:23

Einfache JavaScript-Validierung funktioniert nicht?

Antwort

Verwandte Themen