JQuery Validation - Wrap offending field in a div.
- by Samuurai
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.
