11

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!

Improve this question

5 Answers 5

Reset to default
32

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I prefer this solution to the accepted answer, much simpler and straightforward.
Yes, this is the best answer.
16

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.

Improve this answer

Comments

3

Try:

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

Comments

2

You can extract just the error message in errorPlacement: and append it to whatever you like, like this:

errorPlacement: function(error, element) {
    $('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg.
}
Improve this answer

Comments

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.")

Improve this answer

3 Comments

I see I need to specify a certain container to spite out an error message. I just can't have the border highlighted? I saw that example but didn't see how they did that. What happens to the CSS that they have on the inputs originally.
@Matthew: I don't really understand what you're asking. As of the CSS, the validator adds and removes the errorClass that you specify to the inputs class attribute. The original styles / classes are left untouched.
I guess i'm not doing a good job of explaining myself... sorry about that. LEt me take a look at this today again and get back to you on this. Thanks again for your response.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.