JQuery Validation - Wrap offending field in a div.

Posted by Samuurai on Stack Overflow See other posts from Stack Overflow or by Samuurai
Published on 2009-10-01T09:41:05Z Indexed on 2010/03/26 6:03 UTC
Read the original article Hit count: 210

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about validation