Need to put HTML within the error label container of jQuery Validate plugin

Question

I have a simple validation for my input elements:

$("#forma").validate({
    errorClass: "red"
});
$("#input").each(function(index, elem) {
    var rules = {
        required:true
    };
    $(elem).rules("add", rules);
});

So, when error occurs - error messages are displayed and those error messages are inside label elements. For example, if you forget to enter the last name and you click submit button - this label element will be added:

<label id="lastname-error" class="red" for="lastname">This field is required.</label>

Now, I would like to add empty span element inside of those labels, at the beginning (prependTo) with the background-image and other CSS properties, so it will look like this:

<label id="lastname-error" class="red" for="lastname"><span class="myspan"></span><This field is required.</label>

I guess that this can be done by some event, like: when an error occurs - execute this:

var html = "<span></span>";
$(html).css({
    "background-image": "url('../images/arrowRight.png')",
    "padding-right": "26px",
    "background-repeat: no-repeat"
}).prependTo("label.red");

Do you know how can I do this?

Sparky · Accepted Answer · 2015-03-27 16:36:01Z

2

Desired output:

<label id="lastname-error" class="red" for="lastname"><span class="myspan"></span><This field is required.</label>

"I guess that this can be done by some event"

No, you would not need to use a custom event or function. You would simply use the plugin's errorPlacement option to construct your custom HTML.

The default code is error.insertAfter(element), so this just needs to be modified. You take the text of the error message and prepend it with your <span>, then replace the content of the default error label with your new HTML.

$("#forma").validate({
    // your rules & options,
    errorClass: "red",
    errorPlacement: function(error, element) {
        var html = '<span class="myspan"></span>' + $(error).text();
        $(error).html(html).insertAfter(element);
    }
});

DEMO: http://jsfiddle.net/zrekogqd/

Inspecting the DOM of the jsFiddle shows this result...

<label id="lastname-error" class="red" for="lastname">
    <span class="myspan"></span>This field is required.
</label>

edited Mar 27, 2015 at 16:36

answered Mar 27, 2015 at 16:03

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

2 Comments

PeraMika Over a year ago

That is a solution, thank you. I have just one more question relating to this - is there any event that is related to occurrence of errors (in the case of validation), so that I could use it like this: when an error occurrs - do something?

Sparky Over a year ago

@PeraMika, please refer to the complete page of options for this plugin. Also look at invalidHandler when button is clicked or highlight and unhighlight that fires on all invalid/valid events. Obviously, errorPlacement fires on an error too. The answer depends on what you're trying to do. Otherwise, please "accept" this answer since it specifically solved your original question. Thanks.

Collectives™ on Stack Overflow

Need to put HTML within the error label container of jQuery Validate plugin

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related