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

I don't know if this is the correct way to do it, but we use:

jQuery.validator.messages.required = '';

That suppresses the error messages and leaves the input border.

Actually, the jQuery Plugin documentation points to an example that does this, so I guess it's the accepted method..

Customized message display: No messages displayed for the required method, only for type-errors (like wrong email format); A summary is displayed at the top ("You missed 12 fields. They have been highlighted below.")

Answer 2

Hello Matthew, I understand what you are trying to achieve; I had the same requirements but had serious difficulties trying to achieve it, but I did. Here's how:

1. I created two CSS style classes "errorHighlight" and "textinput", like so:

   .errorHighlight { border: 2px solid #CC0000; } .textinput {border: 1px silver solid;}

2. At design time, I applied the "textinput" class to my text input fields: <input type="text" class="textinput" />

3. And then in my jQuery form validation plugin settings inside my Javascript file, I added the following general validation settings for all forms on this page:

           $.validator.setDefaults({
               errorPlacement: function(error, element) {  
                   $(element).attr({"title": error.append()});
               },
               highlight: function(element){
                   //$(element).css({"border": "2px solid #CC0000"});
                   $(element).removeClass("textinput");
                   $(element).addClass("errorHighlight");
               },
               unhighlight: function(element){
                   //$(element).css({"border": "2px solid #CC0000"});
                   $(element).removeClass("errorHighlight");
                   $(element).addClass("textinput");
               }
           });
   

Now, whenever a field fails validation, the "highlight" callback function is called on the element. The "errorPlacement" callback function prevents the default action of inserting a label after the erring input field, instead it appends the error message to the "title" attribute of the field (which can be used as the source of text for a tooltip display).

I'm still trying to work-out why the error message is not being properly attached to the "title" attribute of the field, however, the above processes helps you achieve what you want to achieve.

Hope this helps.