jQuery Validate errors overlapping

Question

Using jQuery Validate plugin on form. I have multiple parameters and error messages on fields. The error messages overlap, how can I fix this? Shouldn't the first message from required disappear as I start typing?

Thanks for any help.

<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 All 3 errors are showing here at the same time.

I cannot replicate your issue. Your code as posted above is working exactly as it should: jsfiddle.net/bqdujw4b ~ Please show the code the reproduces the issue. — Sparky
– Sparky, Commented Jan 13, 2015 at 18:47
Can you provide us your css? I tryed your code and everything is working fine. I think that is a css issue. — Bellu
– Bellu, Commented Jan 13, 2015 at 18:53
@Bellu, the CSS cannot cause the plugin to improperly toggle the error messages when this plugin has no dependency upon CSS. There is something else missing from his code. — Sparky
– Sparky, Commented Jan 13, 2015 at 18:57
@Sparky yes i know. But looking the screenshot seem that the errors are sticked together. — Bellu
– Bellu, Commented Jan 13, 2015 at 19:05
@Bellu, yes, I know. However, since those messages are dynamically created and toggled by JavaScript, there is nothing in CSS that could cause multiple errors to stay visible simultaneously. Only one error per field can be shown at a time and the JavaScript is solely responsible for this. My point is that something is wrong with his HTML or JavaScript that he has not shown us. — Sparky
– Sparky, Commented Jan 13, 2015 at 19:09

Sparky · Accepted Answer · 2015-01-13 20:07:54Z

1

After inspecting the DOM of your test page, I can see that the JavaScript is working properly. In other words, only a single validation message is shown in the DOM at a time.

Using the DOM tools, I've disabled your position: relative property on these error label elements and the problem goes away. But, now your messages are out of place.

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

I cannot fully explain¹ how or why position: relative is causing all three messages to stay rendered on the screen while not appearing in the DOM.

However, my suggestion is to use the errorElement option of the plugin to change the default label into a div. This will cause the messages to appear under the input as you desire and eliminate the need for position: relative.

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

IMO, it would be better to use the provided options to dynamically place the messages closer to where you want them, rather than changing the position property in CSS.

EDIT:

¹ I believe that although the plugin is properly toggling the content and visibility of the relative element (as evidenced by the DOM), you've positioned its content outside of its normal container. So in other words, the containing element is being toggled correctly, but the content, which you've placed outside of its container, is not.

edited Jan 13, 2015 at 20:07

answered Jan 13, 2015 at 19:46

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jimlongo Over a year ago

Thanks, I changed the errorElement to a div and then just moved them with top and left margins. That's great thanks.

Collectives™ on Stack Overflow

jQuery Validate errors overlapping

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related