如何使用jquery.validation插件不将error元素显示为标签

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

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.

Answer 2

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

Answer 3

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

Answer 4

Try:

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

Answer 5

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