Question

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

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

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。

jQuery表单验证问题

1 个答案: