Jquery validate, wrap error message around input -

i use great jquery validate plugin on inputs :

<input type="text" name="name" value="" /> 

i add structure (add div.error around input , display error label inside div), :

<div class="error">    <label id="name-error" class="error" for="name">this field required.</label>    <input type="text" name="name" value="" /> </div> 

i've try play errorplacement function can't make it. nice if me please.

the jquery validate plugin automatically creates , toggles error message element.

1. you can specify type of element, such div, label, etc. using the errorelement option. default label.

2. you can specify placement of error message element, such before, after, inside parent, etc. using various jquery methods inside the errorplacement option. default "after" input element.

however, cannot wrap error message element around input element. while it's possible use jquery within errorplacement option, problem occurs when error needs cleared. plugin automatically remove/hide error message element when message needs cleared , input element removed/hidden along it.

the solution create outer div , use highlight , unhighlight options toggle error class on outer div. you'll have remember include default code within highlight , unhighlight or default behavior broken. since desired class default error class, can use errorclass argument within highlight , unhighlight options.

your html:

<div>    <input type="text" name="name" value="" /> </div> 

your .validate() method:

$('#yourform').validate({     // rules , options,     errorplacement: function(error, element) {         error.insertbefore(element);     },     highlight: function(element, errorclass, validclass) {         $(element).addclass(errorclass).removeclass(validclass); // <- default behavior         $(element).parent('div').addclass(errorclass); // <- add error class parent div     },     unhighlight: function(element, errorclass, validclass) {         $(element).removeclass(errorclass).addclass(validclass); // <- default behavior         $(element).parent('div').removeclass(errorclass); // <- remove error class parent div     } }); 

the end result in dom during validation error:

<div class="error">    <label id="name-error" class="error" for="name">this field required.</label>    <input type="text" name="name" value="" /> </div>