Jquery Validation plug-in custom error placement

Question

Using the jQuery Validation plug-in for the following form:

Answer 1

I'm using the metadata extension with the validator.. (note, I'm setting it to use the data-meta attribute on the markup...)

<input ... data=meta='{
    errorLabel: "#someotherid"
    ,validate: {
        name:true
    }
}' >

then in code...

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo($(
            $(element).metadata().errorLabel
        ));
    }
});

I've been using the metadata for a lot of similar functionality, which works rather nicely... note, I used the single ticks (apostrophes) around the meta data, this way you can use a JSON serializer server-side to inject into that portion of the tag (which should use double-quotes around strings)... a literal apos may be an issue though, (replace "'" with "\x27" in the string).

Answer 2

I found that using .insertAfter rather than .appendTo works:

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.insertAfter('#invalid-' + element.attr('id'));
    }
});

Answer 3

This is a basic structure, you can use whatever selector you would like in the method. You have the error element and the element that was invalid.

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.prev());
    }
});

Or to target the ID, you could do

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo('#invalid-' + element.attr('id'));
    }
});

Not tested, but should work.

Answer 4

You can also manually add error labels in places you need them. In my particular case I had a more complex form with checkbox lists etc. where an insert or insert after would break the layout. Rather than doing this you can take advantage of the fact that the validation script will evaluate if an existing label tag exists for the specified field and use it.

Consider:

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>

Now add the following line:

<label for="name" class="error" generated="true"></label>

which is standard error label:

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<div id="id-error">
    <label for="name" class="error" generated="true"></label>
<div>

jQuery will use this label rather than generating a new one. Sorry I could not find any official documentation on this but found other posts that came across this behaviour.