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 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.text()});
               },
               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).

Hope this helps.