jquery validation multiple error label locations

Question

Using jquery validation, is there a way to have each error message displayed in a different location.

I want to display the "required" message next to the email field, but the "invalid email address" in a validation summary div at the bottom of the form.

I know i can use errorPlacement but I think this is for all messages.

Adam Botley · Accepted Answer · 2013-11-15 14:16:09Z

1

Use the errorPlacement method in .validate() to contain the error placement logic. 2 arguements are passed to errorPlacement:

error: the error text to be inserted into the DOM.
element: the element being validated.

You can use the error message returned by the validator to decide where it should be positioned. EG:

$("form").validate({
  ignore: '',
  errorPlacement: function(error, element){
    if(error.text() == "This field is required"){
      $('.requiredContainer').text(error.text());
    }
    else
    {
      $('.genericContainer').text(error.text());
    }
  });
});

If you're using this with multiple forms, I would suggest putting all of your validator settings in setDefaults() and just using validate() to handle rules/messages etc

setDefaults docs

answered Nov 15, 2013 at 14:16

Adam Botley

7027 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

jquery validation multiple error label locations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related