Проверка формы?

Question

Я пытаюсь отправить предупреждение «Спасибо, что зарегистрировался» после того, как кто-то правильно заполнит мою форму, но даже если есть ошибка при заполнении формы, иногда она все еще говорит «Спасибо, что зарегистрировалась». Я использую jQuery.

Может кто-нибудь сказать мне, что они думают?

http://codepen.io/dpcarlson/pen/nvwqk

HTML:

<h2>Form</h2> 
    <h1>Validator</h1> 
    <div> 
     <p id="labelforusername">Your Name</p> 
    </div> 
    <div> 
    <input type="text" id="username" > 
    </div> 
    <div> 
     <p id="labelforpassword">Your Password</p> 
    </div> 
    <div> 
    <input type="password" id="password" > 
    </div> 
    <div> 
     <p id="labelforverify">Re-Enter Your Password</p> 
    </div> 
    <div> 
    <input type="password" id="verify" > 
    </div> 
    <div> 
     <p id="labelforemail">Your Email</p> 
    </div> 
    <div> 
    <input type="text" id="email" > 
    </div> 
    <div id="submit">SUBMIT</div> 

JS:

$(document).ready(function() { 

    //Validate Form ********************** 

    $('#submit').click(function() { 

    if($('#username').val().length === 0) { 
     alert("Please Enter Your Name"), $('#username').css('background','rgba(0,0,600,0.3)'); 
    } else { 
     $('#username').css('background', 'rgba(0,0,0,0.3)'); 
    }; 

    if($('#password').val().length === 0) { 
     alert("Please Enter Your Password"), $('#password').css('background','rgba(0,0,600,0.3)'), $('#verify').css('background','rgba(0,0,600,0.3)'); 
    } else if ($('#password').val().length <= 4) { 
     alert("Please Make Your Password At Least 5 Characters"), $('#password').css('background','rgba(0,0,600,0.3)'), $('#verify').css('background','rgba(0,0,600,0.3)'); 
    } else { 
     $('#password').css('background', 'rgba(0,0,0,0.3)'), 
     $('#verify').css('background', 'rgba(0,0,0,0.3)'); 
    }; 

    if($('#password').val() !== $('#verify').val()) { 
     alert("Oops, Seems Like Your Passwords Don't Match!"), $('#password').css('background','rgba(0,0,600,0.3)'), $('#verify').css('background','rgba(0,0,600,0.3)'); 
    }; 

    if($('#email').val().length === 0) { 
     alert("Please Enter Your Email"), $('#email').css('background','rgba(0,0,600,0.3)'); 
    } else { 
     $('#email').css('background', 'rgba(0,0,0,0.3)'); 
    }; 

    if ($('#password').val().length > 4 && 
    $('#password').val().length !== 0 && 
    $('#verify').val().length > 4 && 
    $('#verify').val().length !== 0 && 
    $('#username').val().length > 0 && 
    $('#username').val().length !== 0 && 
    $('#email').val().length !== 0 && 
    $('#email').val().length > 0 && 
    $('#password').val() === $('#verify').val()){ 
     alert("Thanks For Registering!") 
} 
    }); 

    //End Validate Form ********************** 

Приветствия.

Answer 1

Это связано с тем, как структурирован ваш оператор if. В текущем проекте выражение используется со списком выражений для определения логического состояния. Однако он не создается, когда в выражении используется список с разделителями-запятыми, он просто оценивает по одному.

В результате последнее значение является значением, которое сравнивается с истинным в инструкции if. Это означает, что что-то в этом оповещает правда

if((false,false,false,true)===true)alert("true"); 

Так на самом деле для того, чтобы показать «Спасибо за регистрацию» оповещать все, что должно быть правдой является

$('#password').val() === $('#verify').val() 

, когда на самом деле вы, вероятно, хотел, чтобы этот

if ($('#password').val().length > 4 && 
    $('#password').val().length !== 0 && 
    $('#verify').val().length > 4 && 
    $('#verify').val().length !== 0 && 
    $('#username').val().length > 0 && 
    $('#username').val().length !== 0 && 
    $('#email').val().length !== 0 && 
    $('#email').val().length > 0 && 
    $('#password').val() === $('#verify').val()){ 
     alert("Thanks For Registering!") 
}