jQuery form validation issue

Question

I'm not using any jQuery plugin to validate the form, just plain jQuery. My issue is that after it validates all the input elements, even if it shows the error message to the user, it will still submit the form without the user correcting the error.

To elaborate, my form has 3 input elements. with jQuery validation, if all the 3 elements are empty, and the user clicks on the Submit button, it will throw an error highlighting the first element. If the user does not correct the error, but clicks on the submit button again, it will highlight the second element [with the first input element still highlighted]. Likewise for the 3rd element. Now if the user without correcting the error (that is, the input elements are still highlighted) clicks on the submit button again, it will submit the form. Ideally, it should keep on highlighting the first input element till the user corrects his error and then validate the 2nd input element and so on. .and this is what I want to do.

jQuery code:

$(function() {

        /*Form Validation*/
        $("#name")
            .focus(function() {
                if ($(this).val() == "Your Name" || $(this).val() == "Field cannot be blank" ) {
                    $(this).val("");
                    $(this).css("background", "#FFF");
                }
            })
            .blur(function(){
                if ($(this).val() == "") {
                    $(this).val("Your Name");
                }
            })
            .keyup(function() {
                   $("#name").val($(this).val());
            }),

        $("#email")
            .focus(function() {
                if ($(this).val() == "Your Email" || $(this).val() == "Field cannot be blank" ) {
                    $(this).val("");
                    $(this).css("background", "#FFF");
                }
            })
            .blur(function(){
                if ($(this).val() == "") {
                    $(this).val("Your Email");
                }
            })
            .keyup(function() {
                   $("#email").val($(this).val());
            }),


        $("#msg")
            .focus(function() {
                if ($(this).val() == "Your Message" || $(this).val() == "You forgot to enter your message" ) {
                    $(this).val("");
                    $(this).css("background", "#FFF");
                }
            })
            .blur(function(){
                if ($(this).val() == "") {
                    $(this).val("Your Message");
                }
            })
            .keyup(function() {
                   $("#msg").val($(this).val());
            })


    });

    function checkForm(form) {
             var cssObj = {
                  'background-color' : 'red',
                  'border' : 'green'
                }
            if ($("#name").val() == "" || $("#name").val() == "Your Name") {
                $("#name").css(cssObj);
                $("#name").val('Field cannot be blank');
                return false;
            }
            else if ($("#email").val() == "" || $("#email").val() == "Your Email") {
                $("#email").css(cssObj);
                $("#email").val('Field cannot be blank');
                return false;
            }
            else if ($("#msg").val() == "" || $("#msg").val() == "Your Message") {
                $("#msg").css(cssObj);
                $("#msg").val('You forgot to enter your message');
                return false;
            }
            else {
                return true;
            }
    }

. .html:

<form action="somepage.php" method="post" id="contactform">
        <div class="container">
            <div class="field">
                <input type="text" tabindex="1" value="Your Name" name="name" id="name" /><br />
            </div>
            <div class="field">
                <input type="text" tabindex="2" value="Your Email" name="name" id="email" /><br />
            </div>    
            <div class="field">
                <textarea tabindex="3" name="msg" id="msg">Your Message</textarea><br />
            </div> 
            <input type="button" onclick="return checkForm('contactform');" id="sb" value="Submit" class="submitbtn" />

      </div>
</form>

Answer 1

Your checkform function behaves like it should.

However here is a possible correction

function checkForm(form) {
         var cssObj = {
              'background-color' : 'red',
              'border' : 'green'
            }
        if ($("#name").val() == "" || $("#name").val() == "Your Name" || $("#name").val() == 'Field cannot be blank' ) {
            $("#name").css(cssObj);
            $("#name").val('Field cannot be blank');
            return false;
        }
        else if ($("#email").val() == "" || $("#email").val() == "Your Email" ||  $("#email").val() = 'Field cannot be blank' ) {
            $("#email").css(cssObj);
            $("#email").val('Field cannot be blank');
            return false;
        }
        else if ($("#msg").val() == "" || $("#msg").val() == "Your Message" ||  $("#msg").val() == 'You forgot to enter your message'  ) {
            $("#msg").css(cssObj);
            $("#msg").val('You forgot to enter your message');
            return false;
        }
        else {
            return true;
        }
}

Please look at http://en.wikipedia.org/wiki/Idempotence too.