javascript - jQuery表单验证问题

我没有使用任何jQuery插件来验证表单，只是使用普通jQuery。我的问题是，在验证所有输入元素后，即使它向用户显示错误消息，它仍将提交表单，而无需用户更正错误。

详细地说，我的表单有3个输入元素。使用jQuery验证后，如果3个元素全部为空，并且用户单击Submit按钮，它将抛出一个错误，突出显示第一个元素。如果用户没有纠正错误，而是再次单击提交按钮，它将突出显示第二个元素[第一个输入元素仍然突出显示]。同样对于第三个元素。现在，如果用户未更正错误（即，输入元素仍突出显示）而再次单击提交按钮，它将提交表单。理想情况下，它应该一直突出显示第一个输入元素，直到用户纠正错误，然后验证第二个输入元素，依此类推。 。这就是我想要做的。

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>

最佳答案

您的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。