Alex Rivera | Logout

Jquery Validation plug-in custom error placement

Asked 2010-06-03T20:08:49.700
28

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

Edit
Report

1 Answer

3

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

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.insertAfter('#invalid-' + element.attr('id'));
    }
});
answered 2010-08-20T17:16:40.507

Your Answer