jquery validate custom error element with data message attribute

Question

I'm using jquery validate and I want the error element in this format:

<div class="error-holder" data-error-message="Please correct this field"></div>

I already tried using the errorPlacement and errorElement option:

errorPlacement: function (error, element) {
        error = error.attr("class", "error-holder").attr("data-error-message", error.text()).text("");
        error.insertAfter(element);
    },
    errorElement: "div"

This produces the correct error element but when trying to submit the form (with other errors) the error element is duplicated each time.

How can I get the correct error element without the duplicates ?

Why would you need to put the error message inside of an attribute? This is a dynamically created element. Please explain why you cannot use the standard ways to set a custom error message. — Sparky
– Sparky, Commented Oct 9, 2015 at 13:13

Robby Ceyssens · Accepted Answer · 2015-10-12 07:15:07Z

1

I solved this problem by first checking if the error div already exists:

errorPlacement: function (error, element) {
        error = error.attr("class", "error-holder").attr("data-error-message", error.text()).text("");
        if ($("div[for=" + element.attr("id") + "]").length == 0) {
            error.insertAfter(element);
        }
    }

I need this specific error div because of design requirements in css.

Thx for the replies !

answered Oct 12, 2015 at 7:15

Robby Ceyssens

231 silver badge5 bronze badges

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

1 Comment

Brian MacKay Over a year ago

This was the missing link I needed to adapt unobtrusive validation for mdbootstrap, thanks. :)

Sparky · Accepted Answer · 2015-10-09 13:59:18Z

The duplication is presumably being caused by putting this error container within your HTML markup ahead of time and then trying to target it...

error = error.attr("class", "error-holder").attr("data-error-message", ....

The plugin is automatically creating an error element in addition to yours and does not know (cannot find) which one to toggle.

You can set the error container to a div...

errorElement: "div"

And you can set the error class to error-holder...

errorClass: "error-holder"

However, there is no option on this plugin for setting a custom attribute for the error message container. It's unclear why you would need to put the error message inside of an attribute when the plugin dynamically creates and toggles the error messages automatically.

If you need custom error messages, there are various standard methods to achieve this that do not require creating static message elements in advance.

DEMO: http://jsfiddle.net/okwwrsd9/

$(document).ready(function () {

    $('#myform').validate({
        errorElement: "div",
        errorClass: "error-holder",
        rules: {
            foo: {
                required: true
            }
        },
        messages: {
            foo: {
                required: "Please correct this field"
            }
        }
    });

});

Collectives™ on Stack Overflow

jquery validate custom error element with data message attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related