Jquery Validation plug-in custom error placement

Question

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

<form id="information" method="post" action="#">

            <fieldset>
                <legend>Please enter your contact details</legend>
                <span id="invalid-name"></span>
                <div id="id">
                    <label for="name">Name: (*)</label>
                    <input type="text" id="name" class="details" name="name" maxlength="50" />
                </div>

                <span id="invalid-email"></span>
                <div id="id">
                    <label for="email">Email: (*)</label>
                    <input type="text" id="email" class="details" name="email" maxlength="50" />
                </div>
            </fieldset>
            <fieldset>
                <legend>Write your question here (*)</legend>
                <span id="invalid-text"></span>
                <textarea  id="text" name="text" rows="8" cols="8"></textarea>


            <div id="submission">
                <input type="submit" id="submit" value="Send" name="send"/>
            </div>
            <p class="required">(*) Required</p>
            </fieldset>

             </form>

How can I place the errors inside the span tags? (#invalid-name, #invalid-email, #invalid-text)

I read the documentation about error placement but I did not get how it works. Is it possible to handle each single error and place it in the specified element?

Thank you

stackoverflow.com/questions/16681406/…

VKPRO
– VKPRO

2013-12-30 18:17:24 +00:00
Commented Dec 30, 2013 at 18:17 — VKPRO
– VKPRO, Commented Dec 30, 2013 at 18:17

Stefan Morrow · Accepted Answer · 2010-10-28 15:12:50Z

53

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.

answered Oct 28, 2010 at 15:12

Stefan Morrow

5394 silver badges2 bronze badges

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

2 Comments

Gags Over a year ago

this is really brilliant solution :)

Matheus Miranda Over a year ago

Tank you, this is brilliant

mplungjan · Accepted Answer · 2011-09-11 17:52:20Z

36

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.

edited Sep 11, 2011 at 17:52

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jun 3, 2010 at 20:17

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

2 Comments

Paranoid Android Over a year ago

Actually, It does not work but it helped me to understand how it works in general!

Ryan Over a year ago

I had a similar issue, thanks to the above, I came up with the following: errorPlacement: function(error, element) { errorText = error.text(); element.parent().siblings('.your-help-label').text(errorText); } Hope this helps anyone else who comes across this issue.

Community · Accepted Answer · 2012-05-04 17:53:49Z

3

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

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

edited May 4, 2012 at 17:53

CommunityBot

11 silver badge

answered Aug 20, 2010 at 17:16

user383864

311 bronze badge

Comments

Tracker1 · Accepted Answer · 2010-11-04 19:24:58Z

0

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

answered Nov 4, 2010 at 19:24

Tracker1

19.4k12 gold badges85 silver badges106 bronze badges

1 Comment

Tracker1 Over a year ago

Here's an example of an input I'm using now... <input id="dtmCalendarDate" name="dtmCalendarDate" placeholder="mm/dd/yyyy" data-meta='{"type":"calendar", "datatype":"date", "defaultValue":"today", "validate":{ "required":true, "date":true, "datemin":"-1year", "datemax":"+1year"} }' /> .. jQuery.validate + jQuery.metadata rock...

Collectives™ on Stack Overflow

Jquery Validation plug-in custom error placement

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related