CODEWITHSUNDEEP
javascriptjqueryvalidationtwitter-bootstrapjquery-validate
maximus
maximus

Reputation: 11524

JQuery validation plugin error placement does not work

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...

Upvotes: 0

Views: 6123

Answers (1)

ryan
ryan

Reputation: 6655

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);
},

Upvotes: 3

Related Questions