jQuery validation, how to hook error message up to div

Question

I added a jQuery validation rule, so at least one checkbox of class "require-one" has to be checked in order for the form to validate.

$(".require-one").rules("add", {
  required: true,
  minlength: 1,
  messages: {
    required: "Check at least one"
  }
});

It works great, the form does not submit and focus is set to the first checkbox.

But how do I get it to show the error message in:

<span id="require-one-errormessage></span>

Thanks in advance

Title says div but OP shows span.

Sparky
– Sparky

2014-12-21 19:19:52 +00:00
Commented Dec 21, 2014 at 19:19 — Sparky
– Sparky, Commented Dec 21, 2014 at 19:19
Where is your .validate() method and the relevant HTML?

Sparky
– Sparky

2014-12-21 19:22:59 +00:00
Commented Dec 21, 2014 at 19:22 — Sparky
– Sparky, Commented Dec 21, 2014 at 19:22

Sparky · Accepted Answer · 2014-12-21 19:43:39Z

2

You can change the default label element into anything by using the errorElement option within your .validate() method.

$('#myForm').validate({
    errorElement: "span",
    // your other options
});

You could then use the errorPlacement option to place the element within your layout. Use a conditional to place for one type versus another.

$('#myForm').validate({
    errorElement: "span",
    errorPlacement: function(error, element) {
        if ($(element).is(':checkbox')) {
            error.insertBefore(element); // custom
        } else {
            error.insertAfter(element);  // default
        }
    },
    // your other options
});

AFAIK, because the error element is created and toggled dynamically by the plugin, there's no way to assign an id, nor would there be a point. However, you could assign a different class to all error messages, if needed, by using the errorClass option.

edited Dec 21, 2014 at 19:43

answered Dec 21, 2014 at 19:22

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

Collectives™ on Stack Overflow

jQuery validation, how to hook error message up to div

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