Javascript Validierungscode wird nicht funktionieren

Question

Ich codiere ein Validierungsskript, aber wenn ich den Code ausführe nichts passieren außer alle Textfeld Grenzen rot (was soll passieren, aber es ist immer noch rot unter der Bedingung, dass es Text gibt im Textfeld). hier mein Code

function frontendvalidation(){ 
var emailaddbox = document.getElementById('emailaddbox').value; 
//var emailaddbox = document.forms["signupform"]["emailaddbox"].value; 
var username = document.getElementById('username').value; 

var password = document.getElementById('passwordbox').value; 

var confirmpasswordbox = document.getElementById('confirmpasswordbox').value; 

// if our signup fields are empty then the border will be red 
if(username === '' || emailaddbox === '' || password=== '' || confirmpasswordbox=== ''){ 

    document.getElementById('username'). style.borderColor = "red"; 
    document.getElementById('emailaddbox').style.borderColor = "red"; 
    document.getElementById('passwordbox').style.borderColor = "red"; 
    document.getElementById('confirmpasswordbox').style.borderColor = "red"; 

    return false; 

} 

if(username === !'' && username.length => 5) { 
    document.getElementById('username'). style.borderColor = "green"; 

    return true; 
} 

if(emailaddbox === !''){ 

document.getElementById('emailaddbox').style.borderColor = "green"; 

} 

if (password === ! '' && password.length <=5){ 

       document.getElementById('passwordbox').style.borderColor = "green"; 


} 

if (password != confirmpasswordbox){ 
      document.getElementById('confirmpasswordbox').style.borderColor = "red"; 

} else if (confirmpasswordbox === password){ 

      document.getElementById('confirmpasswordbox').style.borderColor = "green"; 
      return true ; 
} 
} 

Answer 1

ändern die Bedingungen username === !'' zu username !== ''

Die Syntax ist !'' jeder ist false, und wenn Sie mit einem String vergleichen werden Sie jedes Mal, false zu erhalten, weil Sie mit === vergleichen, sie brauchen Um mit einem anderen ähnlichen String zu vergleichen, um ein true Ergebnis zu erhalten, ist in diesem Fall '' === false dann jedes Mal false.

Ich repariere Ihren Code und sah, dass es viele Syntaxfehler wie => gibt, die korrekte ist >=. Siehe den Code, den ich repariere.

Ich denke, das ist das, was Sie wollen.

function frontendvalidation(event){ 
 
    var elementEmail = document.getElementById('emailaddbox'); 
 
    var elementUserName = document.getElementById('username'); 
 
    var elementPassword = document.getElementById('passwordbox'); 
 
    var elementConfirmPassword = document.getElementById('confirmpasswordbox'); 
 
    var validate = false; 
 

 
    if (elementUserName.value !== '' && elementUserName.value.length >= 5) { 
 
     elementUserName.style.borderColor = "green"; 
 
     validate = validate ? validate : true; 
 
    } else { 
 
    \t elementUserName.style.borderColor = "red"; 
 
    } 
 
    
 
    if (elementEmail.value !== '') { 
 
    \t elementEmail.style.borderColor = "green"; 
 
     validate = validate ? validate : true; 
 
    } else { 
 
    \t elementEmail.style.borderColor = "red"; 
 
    } 
 
    
 
    if (elementPassword.value !== '' && elementPassword.value.length <= 5){ 
 
     elementPassword.style.borderColor = "green"; 
 
     validate = validate ? validate : true; 
 
    } else { 
 
    \t elementPassword.style.borderColor = "red"; 
 
    } 
 
    
 
    if (elementConfirmPassword.value !== '' && elementConfirmPassword.value === elementPassword.value){ 
 
     elementConfirmPassword.style.borderColor = "green"; 
 
     validate = validate ? validate : true; 
 
    } else { 
 
\t  elementConfirmPassword.style.borderColor = "red"; 
 
    } 
 
    
 
    return validate; 
 
} 
 

 
document.getElementById('btnValidator').onclick = frontendvalidation;

<input type="text" id="username" /><br/> 
 
<input type="text" id="emailaddbox" /><br/> 
 
<input type="text" id="passwordbox" /><br/> 
 
<input type="text" id="confirmpasswordbox" /><br/> 
 
<button id="btnValidator" >Validator</button>

Answer 2

Was versuchen Sie zu tun mit:

if (password === ! '' && password.length <=5){ 
    document.getElementById('passwordbox').style.borderColor = "green"; 
} 

so etwas wie dieses stattdessen versuchen:

if (password != undefined && password.length > 5){ 
    document.getElementById('passwordbox').style.borderColor = "green"; 
} 

Grundsätzlich password === ! '' nicht gültige Syntax ist. Sie sagen etwas wie "Passwort ist genau gleich der Umkehrung einer leeren Zeichenfolge". Was, mit einigen JavaScript-Typ Gymnastik, entspricht "Passwort ist genau gleich wahr".

(Auch scheint es mehr Sinn zu machen, das Passwort von mehr als 5 Zeichen zu zwingen, nicht weniger als oder gleich 5 Zeichen)

Answer 3

Zusätzlich zu den Syntaxfehler in anderen Antworten skizziert, die Wenn die Zeile nach Leerzeichen in einem Feld sucht, werden alle Felder als Fehler markiert, wenn sie leer sind. Auch gab es einen Syntaxfehler hier: username.length => 5 sollte es sein username.length> = 5

Hier aktualisiert Arbeitscode:

function frontendvalidation(){ 
    var emailaddbox = document.getElementById('emailaddbox').value; 
    //var emailaddbox = document.forms["signupform"]["emailaddbox"].value; 
    var username = document.getElementById('username').value; 
    var password = document.getElementById('passwordbox').value; 
    var confirmpasswordbox = document.getElementById('confirmpasswordbox').value; 

    //Default to everything showing an error, and clear the errors as fields are validated. 
    document.getElementById('username').style.borderColor = "red"; 
    document.getElementById('emailaddbox').style.borderColor = "red"; 
    document.getElementById('passwordbox').style.borderColor = "red"; 
    document.getElementById('confirmpasswordbox').style.borderColor = "red"; 

    // if our signup fields are empty then the border will be red 
    if(username === '' && emailaddbox === '' && password=== '' && confirmpasswordbox=== ''){ 
     return false; 
    } 

    if(username !== '' && username.length >= 5) { 
    document.getElementById('username').style.borderColor = "green"; 
    } 

    if (emailaddbox !== ''){ 
    document.getElementById('emailaddbox').style.borderColor = "green"; 
    } 

    if (password !== '' && password.length <=5){ 
    document.getElementById('passwordbox').style.borderColor = "green"; 
    } 

    if (password != confirmpasswordbox){ 
    document.getElementById('confirmpasswordbox').style.borderColor = "red"; 
    } else if (confirmpasswordbox === password){ 
    document.getElementById('confirmpasswordbox').style.borderColor = "green"; 
    return true ; 
    } 
} 

Arbeits Codepen: http://codepen.io/nobrien/pen/oxqoeR