Код проверки javascript wont work

Question

Я кодирую скрипт проверки, но когда я запускаю код, ничего не происходит, за исключением того, что все границы текстового поля становятся красными (что должно произойти, но оно по-прежнему остается красным при условии, что есть текст в текстовом поле). Вот мой код

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

Изменить условия username === !'' для username !== ''

Синтаксис !'' каждый является false, и если сравнить со строкой вы получите каждый раз false, потому что вы сравниваете с ===, им нужно для сравнения с другой подобной строкой, чтобы получить результат true, в вашем случае '' === false, то есть каждый раз false.

Я исправлю ваш код и увидел, что существует много синтаксических ошибок, таких как =>, правильный - >=. См. Код, который я исправляю.

Я думаю, что это вы хотите.

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

Что вы пытаетесь сделать с:

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

Попробуйте что-нибудь подобное вместо этого:

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

В основном password === ! '' не является действительным синтаксисом. Вы говорите что-то вроде «пароль строго равен инверсии пустой строки». Который, с некоторой гимнастикой типа JavaScript, приравнивается к «пароль строго равен true».

(Кроме того, он, казалось бы больше смысла, чтобы заставить пароль на более чем 5 символов, не менее или равным 5 символов)

Answer 3

В дополнение к синтаксических ошибок, описанных в других ответах, то проверка строки для пробелов в любом поле указывает все поля как ошибку, если какая-либо из них пустая. Также была ошибка синтаксиса здесь: username.length => 5 должно быть username.length> = 5

Вот обновленный рабочий код:

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 ; 
    } 
} 

Рабочая Codepen: http://codepen.io/nobrien/pen/oxqoeR