jQuery 验证错误重叠

Question

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

感谢您的帮助。

<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 工具，我在这些错误 label 元素上禁用了您的 position: relative 属性，问题就消失了。但是，现在您的消息不合适了。

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 验证错误重叠

jQuery Validate errors overlapping

jquery

jquery-validate