Javascript jQuery表单验证问题

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

更详细地说，我的表单有3个输入元素。在jQuery验证中，如果所有3个元素都为空，并且用户单击Submit按钮，它将抛出一个错误，突出显示第一个元素。如果用户没有纠正错误，但再次单击submit按钮，它将高亮显示第二个元素[第一个输入元素仍高亮显示]。第三个元素也是如此。现在，如果用户没有纠正错误（即，输入元素仍然突出显示），再次单击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;
        }
}

请再看一眼