JQuery Validation - Wrap offending field in a div.

Question

Hi, It's my first time using StackOverFlow and first time trying to set up jQuery Validation. It's displaying <label> tags with the error messages as default behaviour, however the way my CSS is set up I need a div to wrap around the offending element and a message display in <p> tags.

Without errors, my html looks like this:

<div class="grid-26 append-2">
    <p class="noMarginBottom">
     <label>First Name</label>
     <div class="jNiceInputWrapper">
      <div class="jNiceInputInner">
       <input type="text" class="text jNiceInput" name="name"/>
      </div>
     </div>
    </p>         
    <span class="clear"/>
</div>

And with Errors, it needs to look like this - Note the div with class "error" and the <p> tag.

<div class="grid-26 append-2">
    <div class="error">
     <p>Please write your real name</p>
     <p class="noMarginBottom">
      <label>First Name</label>
      <div class="jNiceInputWrapper">
       <div class="jNiceInputInner">
        <input type="text" class="text jNiceInput" name="name"/>
       </div>
      </div>
     </p>         
     <span class="clear"/>
    </div>
</div>

My Validation code is very basic.

$(document).ready(function(){
    $("#contact_form").validate({
     rules:{
      name: {
       required: true
      }
     }
    });
});

This is my first venture into jQuery and form validation, so I'll be the first to say "I'm lost!" any help would be greatly appreciated. Thanks.

Answer 1

label.parents('.append-2')
     .prepend('<p>Please write your real name</p>')
     .wrapInner('<div class="error"></div>');

To restore it to its previous state:

var error = label.parents('.error');
error.siblings().remove();
error.replaceWith(error.children());

Answer 2

I figured it out:

     ,errorPlacement: function(error,element){

  $('[for='+element.attr("name")+']').parents('.grid-26')

  .prepend('<p>'+error.text()+'</p>')

  .wrapInner('<div class="error"></div>');

 }

Answer 3

Here's my full working code- I opted to use the default <label> tags rather than the <p> tags.

$(document).ready(function(){
$("#contact_form").validate({
 rules:{
  name: {
   required: true
  },
 }
 ,messages: {
  name: "Please write your full name"
 }
 ,errorClass: "error_label"
 ,errorPlacement: function(error,element){
  parentDiv = element.parents('.grid-26');
  parentDiv.wrapInner('<div class="error"></div>');
  errorDiv = parentDiv.children(".error");
  error.appendTo(errorDiv);
 }
 ,success: function(element){
  var errorDiv = element.parents('.error');
  element.remove();
  errorDiv.siblings().remove();
  errorDiv.replaceWith(errorDiv.children());
 }

});
});

Thanks for your help Alex!!