Really easy way to add errors under elements with jquery validate

Somehow, the problem of adding validation via jquery.validate has always felt like enough of a barrier that I find other hacky ways around the solution. I will probably try googling it once, skim the docs once, then settle for finding out how to simply add the rules.

This solution works without breaking most form layouts, because it adds padding below the input element and places error messages below via absolute position.

Screenshot 2013-11-17 01.53.48

CoffeeScript

$("form").validate
		errorPlacement: (error, element) ->
			$wrapped = element.wrap('<div class="error-wrapper" />').parent()
			error.appendTo($wrapped)

SASS

.error-wrapper {
	position: relative;
	@include inline-block;
	padding-bottom: 15px;
	label.error {
		position: absolute;
		bottom: -5px;
		left: 15px;
		font-size: 13px;
		text-transform: uppercase;
	}
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s