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