Javascript Subscribe Form Validation Errors

Question

I'm building a basic subscribe form which uses Javascript for validation, but it's not working correctly.

My Form code is:

<form id="pageSubscribeForm">
    <div class="pageSubscribeCell">
        <input id="pageSubscribeName" type="text" class="pageSubscribeInput" value="Tell Us Your Name" />
    </div>
    <div class="pageSubscribeCell">
        <input id="pageSubscribeEmail" type="text" class="pageSubscribeInput" value="Add Your Email Address" />
    </div>          
    <div class="pageSubscribeCell hidden">
        <input id="pageSubscribeSpam" type="text" class="pageSubscribeInput" value="" />
    </div>
    <div class="pageSubscribeCell">
        <div class="pageSubscribeButton">
            <div id="pageSubscribeSubmit" class="pageSubscribeAction"></div>
        </div>
    </div>
</form>

And the validation code is:

$("#pageSubscribeSubmit").click(function() {
var name = $("#pageSubscribeName").val();
var nameok = 0;
var email = $("#pageSubscribeEmail").val();
var emailok = 0;
var spam = $("#pageSubscribeSpam").val();
var spamok = 0; 
var dataString = 'name='+ name + '&email=' + email + '&spam=' + spam;

if(name!='Tell Us Your Name'){
    nameok = 1
}else{
    $("#pageSubscribeName").removeClass("subscribeSuccess").addClass("subscribeError");
}

if(email!='Add Your Your Email Address'){
    emailok = 1
}else{
    $("#pageSubscribeEmail").removeClass("subscribeSuccess").addClass("subscribeError");
}

if(spam ==''){
    spamok = 1
}else{
    $("#pageSubscribeSpam").removeClass("subscribeSuccess").addClass("subscribeError");
}

if(nameok == 1 && emailok == 1 && spamok == 1){
    $('#pageSubscribeSubmit').hide();
}

When I click on the submit link I get the error class added to my Name cell but the email cell stays the same and the spam cell stays hidden. Any ideas why or how to fix?

Answer 1

To fix YOUR code, remove the second "Your" in the test

if(email!='Add Your Your Email Address'){

To avoid such problems I strongly suggest something like this which works

 $(function() { $("#pageSubscribeSubmit").on("click", function() { var name = $.trim($("#pageSubscribeName").val()); var email = $.trim($("#pageSubscribeEmail").val()); var spam = $("#pageSubscribeSpam").val(); var dataString = 'name=' + name + '&email=' + email + '&spam=' + spam; $("#pageSubscribeName").toggleClass("pageSubscribeError", name == ""); $("#pageSubscribeEmail").toggleClass("pageSubscribeError", email == ""); var spamok = spam == $("#pageSubscribeSpam").get(0).defaultValue; // nothing changed $("#pageSubscribeSpam").toggle(!spamok); if (spamok && $(".pageSubscribeError").length == 0) { // no errors $('#pageSubscribeSubmit').hide(); $.ajax({ type: "POST", url: "php/subscribe.php", data: dataString, success: function() { $('#pageSubscribeSubmit').slideUp(); } }); } }); }); 

 .pageSubscribeError { border:1px solid red } #pageSubscribeSpam { display:none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="pageSubscribeForm"> <div class="pageSubscribeCell"> <input id="pageSubscribeName" type="text" class="pageSubscribeInput" value="" placeholder="Tell Us Your Name" /> </div> <div class="pageSubscribeCell"> <input id="pageSubscribeEmail" type="text" class="pageSubscribeInput" value="" placeholder="Add Your E-Mail Address" /> </div> <div class="pageSubscribeCell hidden"> <input id="pageSubscribeSpam" type="text" class="pageSubscribeInput" value="khujh" /> </div> <div class="pageSubscribeCell"> <div class="pageSubscribeButton"> <div id="pageSubscribeSubmit" class="pageSubscribeAction">Submit</div> </div> </div> </form> 

Answer 2

Your email field doesn't get the error class because your test is checking the wrong text (2x 'Your'):

if(email!='Add Your Your Email Address'){

You also asked why "... the spam cell stays hidden ...". There is nothing in the code you posted which would remove the .hidden class from the div around #pageSubscribeSpam. Assuming your .hidden class does what it suggests, then the #pageSubscribeSpam input is hidden on page load. There is no way for a user to enter a value, so when the button is clicked, its value is still ''. So spamok = 1 , always - it will never get the .subscribeError class added.