JQuery validation plugin error placement does not work

Question

I validate a form with the JQuery validator plugin. However, I want to place the error output at a specific place. I tried the Error Placement from the Validator documentation

<div class="form_errors"><!--HERE SHOULD THE ERROR GO --></div>
                            <div class="form_holder_invitee" >
                                <form class="homepage_invitee_form" id="homepage_invitee_form" action="add" method="get">
                                    <input name="email" placeholder="Email Address"
                                        id="email_address_new" type="text placeholder"> <br>
    ...

My validation script is:

$(document).ready(function(){

    $('#homepage_invitee_form').validate({
        rules: {
            firstName: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            lastName: {
                minlength: 2,
                required: true
            }
        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent(".form_errors") );
        },
        debug:true

    });

}); // end document.ready

I want to place the error into the <div class="form_errors">. However, nothing happens when I submit the form.

Any ideas?

PS.: I also tried that link:

jQuery validation error position

However, also does not work...

Are you wanting just one message from one element placed there, or do you want all messages from the form placed there... like an error summary box? — Sparky
– Sparky, Commented Mar 29, 2013 at 23:12

ryan · Accepted Answer · 2013-03-29 19:42:02Z

3

The problem is your selector and use of .parent(). Update your errorPlacement to the following and it will work. See this fiddle to view it working.

errorPlacement: function(error, element) {
    console.log(element);
    element.closest(".form_holder_invitee").prev().append(error);
},

answered Mar 29, 2013 at 19:42

ryan

6,6856 gold badges45 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

JQuery validation plugin error placement does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related