jQuery form validation: Define container for errors

Question

I'm using the jQuery validation plugin, to validate my form. It works (places the error messages, next to the invalid input, which screws up my design), but I'd like to specify the error-container for every input field. I found the errorLabelContainer, but this puts all errors in one container.

Let's say, I have 2 inputs, one with id name and one with firstname. And let's also assume I have 2 error spans, with ids errorName and errorFirstname. How do I tell jQuery to write the validation error for name into the span with the id errorName.

This is my current jQuery:

$("#form").validate({
    errorLabelContainer: "#errors",
        rules: {
            name: {
                required: true
            },
            firstname: {
                required: true
            }
        },
        messages: {
            name: {
                required: "Enter name"
            },
            firstname: {
                required: "Enter firstname"
            }
        }
    })

Andrew Whitaker · Accepted Answer · 2012-05-24 02:11:46Z

16

I think the errorPlacement option suits your needs:

Customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

You can determine the element you want to place the error in based on the invalid element:

$("#form").validate({
    rules: {
        name: {
            required: true
        },
        firstname: {
            required: true
        }
    },
    messages: {
        name: {
            required: "Enter name"
        },
        firstname: {
            required: "Enter firstname"
        }
    },
    errorPlacement: function ($error, $element) {
        var name = $element.attr("name");

        $("#error" + name).append($error);
    }
});

Example: http://jsfiddle.net/R3aEQ/

answered May 24, 2012 at 2:11

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

2 Comments

Tofuwarrior Over a year ago

can you do this so that it is different at different stages of a wizard? How would you dynamically change errorPlacement?

Andrew Whitaker Over a year ago

You could have errorPlacement call a function that belongs to a workflow step. It really depends on how your workflow is structured though

Collectives™ on Stack Overflow

jQuery form validation: Define container for errors

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