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;
	}
}

Leave a Comment