jQuery validation not using errorPlacement HTML

Question

I have the following jQuery Validation code:

$('form').validate({
    errorElementClass: 'input-validation-error',
    errorClass: 'field-validation-error',
    errorPlacement: function (error, element) {
        error.html('<i class="icon-warning"></i> ' + error.text()).insertAfter(element);
    }
});

Which should be inserting my custom error message html after each element that errors on my page. However I'm finding the plugin doesn't like this and instead overrides whatever I want to put inside the HTML with just the error message itself and removes the 

How can I stop this?

score 0 · Answer 1 · edited May 23 '17 at 11:44

By default, the plugin inserts a <label> element, as per the errorElement option, containing the error message and then toggles this <label> element as needed. If your code worked, it would over-ride this errorElement and the plugin would no longer be able to find and toggle the messages.

"How can I stop this?"

You can't. The developer provides no direct option or method of adding any markup to the plain text that is contained within the validation message element.

However, there are two workarounds that will achieve your desired markup:

ONE: You could set custom messages that contain the  already attached.

$('form').validate({
    errorElementClass: 'input-validation-error',
    errorClass: 'field-validation-error',
    rules: {
        foo: {
            required: true
        },
        bar: {
            required: true
        }
    },
    messages: {
        foo: {
            required: "<i class='icon-warning'></i> This field is required"
        },
        bar: {
            required: "<i class='icon-warning'></i> This field is required"
        }
    },
    ....

This solution is very tedious if your form contains a lot of fields and rules.

Proof-of-concept DEMO 1: jsfiddle.net/g4zq7p8j/

You could also use jQuery .extend() to change all the default messages at once

TWO: Otherwise, manually put the  elements into your markup and set them as display: none within your CSS.

<input type="text" name="foo" /><i class="icon-warning"></i>

Then you can use the highlight and unhighlight callback options to toggle these  elements along with the associated error messages.

$('form').validate({
    errorElementClass: 'input-validation-error',
    errorClass: 'field-validation-error',
    errorPlacement: function(error, element) {
        error.insertAfter($(element).next('i'));
    },
    highlight: function(element, errorClass, validClass) {
        .... // default highlight code here
        $(element).next('i').show();
    },
    unhighlight: function(element, errorClass, validClass) {
        .... // default unhighlight code here
        $(element).next('i').hide();
    },
    ....

Proof-of-concept DEMO 2: jsfiddle.net/kxmw9do2/

You could also easily have jQuery insert these elements dynamically on page load

$(document).ready(function() {

    $('<i class="icon-warning"></i>').insertAfter('[type="text"]');

    ....

So there is no way to get the error messages to contain custom html that is applied to all errors without having to manually customise each error or have the html already in the dom? — Cameron, Jun 28 '16 at 09:26
The extend solution posted here: http://stackoverflow.com/a/2457053/594235 looks to work but still means overriding each error message rather than the html. — Cameron, Jun 28 '16 at 09:29
@Cameron, as I already stated in my answer, the developer provides no method for adding HTML to the message text. And yes, the `.extend()` solution is already part of my answer... it's a variation of workaround number one and I linked to it under my demo #1. These two workarounds (and their variations) seem to achieve your final desired markup as per your OP. — Sparky, Jun 28 '16 at 14:50
@Cameron, so if you don't like having the HTML already in the DOM, what's wrong with [my variation of workaround #2](http://jsfiddle.net/3q7z6bbb/), where you have jQuery dynamically add the markup on page load? It's effectively not much different than having the plugin do it when the error is generated. — Sparky, Jun 28 '16 at 14:52

jQuery validation not using errorPlacement HTML

1 Answers1