CODEWITHSUNDEEP
jqueryhtmlvalidationerrorplacement
Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Error placement in jquery validation

I want to place the validation error in specific location, by default I am using 

errorPlacement: function(error, element){               
            error.insertAfter(element);     
        }

This display the error message just after the form control element. But I want to display the error in specific location for each form control element.

My HTML page is look like this:

<form method='post' action='regaction.php' id='regform'>
    <label for='username'>Username<span class='required'>*</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <input type='text' id='username' name='username'><br><span class='err_label'></span><br>
    <label for='password'>Password<span class='required'>*</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <input type='password' id='password' name='password'><br><span class='err_label'></span><br>
    <label for='password'>Confirm Password<span class='required'>*</span> </label>
    <input type='password' id='cpassword' name='cpassword'><br><span class='err_label'></span><br>
    <label for='email'>Email<span class='required'>*</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <input type='text' id='email' name='email'><br><span class='err_label'></span><br>
    <input type='reset' name='resetbtn' id='resetbtn' value='Reset'>
    <input type='submit' name='submitbtn' id='submitbtn' value='Register'>
   </form>

I want to display the validation error message in span with class err_label for each form control.

I tried something like this:

$(element).next().find('.err_label').html(error);

and

$(element).find('.err_label').html(error);

etc..

but no luck. I think the problem may be simple but I can't get the correct solution.. someone can help me..

Upvotes: 0

Views: 883

Answers (2)

Roamer-1888
Roamer-1888

Reputation: 19288

Try :

errorPlacement: function(error, element) {              
    $(element).nextAll('.err_label').eq(0).html(error);
}

Upvotes: 1

Henry Tran
Henry Tran

Reputation: 526

You can simply add 

errorElement: 'span', 
errorClass: 'err_label'

into your validate() call.

Upvotes: 0

Related Questions