Вопрос проверки формы jQuery

Question

Я не использую никакой плагин jQuery для проверки формы, просто обычный jQuery.Моя проблема в том, что после проверки всех элементов ввода, даже если он показывает сообщение об ошибке пользователю, он все равно отправит форму без исправления ошибки пользователем.

Для уточнения, моя форма имеет 3 элемента ввода.с проверкой jQuery, если все 3 элемента пусты, и пользователь нажимает кнопку «Отправить», он выдаст ошибку, выделяющую первый элемент.Если пользователь не исправляет ошибку, но снова нажимает кнопку отправки, он выделяет второй элемент [с первым выделенным элементом ввода, все еще выделенным].Аналогично для 3-го элемента.Теперь, если пользователь без исправления ошибки (то есть элементы ввода по-прежнему подсвечиваются) снова нажимает кнопку отправки, он отправляет форму.В идеале, он должен продолжать выделять первый элемент ввода, пока пользователь не исправит свою ошибку, а затем проверить 2-й элемент ввода и так далее.И это то, что я хочу сделать.

jQuery код:

$(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

Ваша checkform функция ведет себя так, как и должна.

Однако вот возможное исправление

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

Пожалуйста, посмотрите также http://en.wikipedia.org/wiki/Idempotence.