How to not display error element as label with jquery.validation plugin

Question

Okay guys,

I have read through all the other posts and question on jQuery Validation plugin and they don't seem to have what I'm looking to do.

I would like to have the display error not show with message but just create a red border around the input field instead.

Here is just some of the form:

<form id="donate_form" name="checkoutForm" method="post">
    <label class="desc" id="title0" for="billing_name_first">
    Name
    <span id="req_1" class="req">*</span>
</label>
<div>
    <span class="left">
        <input name="billing.name.first" id="billing_name_first" type="text" class="field text required" value="" tabindex="1" />
        <label for="billing_name_first">First</label>
    </span>
    <span class="right">
        <input name="billing.name.last" id="billing_name_last" type="text" class="field text required" value="" tabindex="2" />
        <label for="billing_name_last">Last</label>
    </span>
</div>

I am assuming that I need to place the class required on the input??

Then with CSS hide the label.error which is spit out by the plugin? I've tried that but no go.

Am I looking in the right place?

Thanks!

Answer 1

Try:

$(function() {
    $("#donate_form").validate({
        errorPlacement: $.noop
    });
});

Answer 2

All these solutions seem to be more complicated than they need to be. Here's a simple solution. .error is added to invalid fields by default. So, first thing we need to do is style it so it changes the border and background to different shades of red:

.error {
    border-color: #cd0a0a !important;
    background: #fef1ec !important;
}

Then, in your JavaScript:

$(function() {
    $("#donate_form").validate({
        errorPlacement: $.noop
    });
});

The errorPlacement option is how the validate plugin lets you override how the error message is placed. In this case, we simply make it do nothing, and thus no error message is created.