Question

在表单上使用jQuery Validate插件。我在字段上有多个参数和错误消息。错误消息重叠，我该如何解决？当我开始输入时，不应该从需要的第一条消息消失吗？

感谢您的帮助。

<script>      
    jQuery(document).ready(function() {


    // validate signup form on keyup and submit
    $("#entry-form").validate({
        rules: {
            fname: {        required: true,
                            minlength:2
            },      
            lname: {        required: true,
                            minlength:2
            },      
            advisor_id: {   required: true,
                            digits:   true,
                            rangelength: [8,8]
            },      
            email: {        required: true,
                            email: true,
                            remote: "emails.action"
            },
            agree:          "required"
        },
        messages: {
            fname: {        required: "Please Enter your firstname",
                            minlength: "You must enter at least 2 characters"},
            lname: {        required: "Please Enter your lastname",
                            minlength: "You must enter at least 2 characters"},
            advisor_id: {   required: "You must enter your Advisor ID",
                            digits: "Your Advisor ID should only contain numbers",
                            rangelength:"Your Advisor ID should be 8 characters"
            },      
            email: {        required: "Please enter a valid email address",
                            minlength: "Please enter a valid email address",
            },
            agree:          "You must agree to our terms "
        },
        // the errorPlacement
        errorPlacement: function(error, element) {
            if (element.is(":checkbox"))
                error.appendTo(element.next());
            else if (element.is(":input"))
                error.insertAfter(element); 
        },
        // specifying a submitHandler prevents the default submit, good for the demo
        submitHandler: function() {
            alert("submitted!");
        },
    });

});
</script>

        <form method="post" id="entry-form" action="inc/submission.php">
            <input type="text"  name="fname" id="fname" placeholder="First Name" />
            <input type="text"  name="lname" id="lname" placeholder="Last Name"  />
            <input type="text"  name="advisor_id" id="advisor_id" placeholder="Advisor ID"  /> 
            <input type="email" name="email" id="email" placeholder="Email Address"  />
            <div class="agree-to-rules"><input type="checkbox" name="agree" id="agree" required /><label for="checkbox"> I agree to contest <a href="#">Rules &amp; Regulations</a></label></div>
            <input type="submit" value="Enter Now" name="submit" id="submit"  />
       </form>

jquery Validate Error messages http://rdiv.com/screenshots/jqueryValidateError.png 所有3个错误都在同一时间显示。

Answer 1

在检查your test page的DOM之后，我可以看到JavaScript正常运行。换句话说，DOM中一次只显示一条验证消息。

使用DOM工具，我已在这些错误position: relative元素上停用了label属性，问题就消失了。但是，现在你的消息不合适了。

label#advisor_id-error.error {
    color:red;
    font-size:14px;
    font-style:italic;
    position: relative;  /* <- here */
    top: 30px;           /* <- here */
    left: -120px;        /* <- here */
}

我无法完全解释¹ position: relative如何或为什么导致所有三条消息在屏幕上呈现而未出现在DOM中。

但是，我的建议是使用插件的the errorElement option将默认label更改为div。这会使消息根据您的需要在 input下显示，并消除对position: relative的需求。

$("#entry-form").validate({ errorElement: "div", ....

IMO，最好使用提供的选项动态地将消息放置在您希望的位置附近，而不是更改CSS中的position属性。

修改

¹我相信尽管插件正在切换relative元素的内容和可见性（由DOM证明），但您已将其内容置于外部的正常容器。换句话说，正在正确切换包含元素，但是您放置在其容器之外的内容不是。

jQuery验证错误重叠

1 个答案: