How to add custom attribute in HTML 5 for valid markup?

Question

I am using jQuery validation plugin and placed the error placeholder according to design needs. Used following code:

<label for="fav[]" class="error" generated="true"></label> <input id="field-11" name="fav[]" value="252483" type="checkbox"> <input id="field-12" name="fav[]" value="252484" type="checkbox">

But client complained that the markup is not valid. Following are the errors:

Attribute generated not allowed on element label at this point.
The for attribute of the label element must refer to a form control.

I am using HTML 5. I know in html 5 we can use custom attributes by data-{attribute}. But as generated is a jquery validation plugin attribute, we can't append data- to it.

So, anyone know how to fix the above w3 validation errors? Your help is really appreciated.

Update to version 1.11.1 of jQuery Validate and safely get rid of the generated attribute. — Sparky
– Sparky, Commented Mar 18, 2014 at 5:23

Sparky · Accepted Answer · 2014-03-18 05:20:29Z

You can solve your problem by simply eliminating your "placeholder"... it's completely unnecessary. The jQuery Validate plugin automatically creates the error label markup as needed.

If you want the label to appear before the input, use the errorPlacement callback function...

$('#myform').validate({
    // your other options and rules,
    errorPlacement: function(error, element) {
        error.insertBefore(element);
    }
});

DEMO: http://jsfiddle.net/8gQ7U/1/

By default the label will have class="error" but that too could be manipulated with the errorClass option. Point being, you can fully manipulate the plugin into using your markup without having to manually write your markup.

Quote OP:

"But as generated is a jquery validation plugin attribute..."

Inspecting the source code of version 1.11.1 the plugin reveals no such thing.

The generated attribute used to be part of previous versions of this plugin, but not any longer.

So if you still insist on writing your own label markup manually, you can safely eliminate the generated attribute as long as you use version 1.11.1 of the plugin.

DEMO (1.11.1): http://jsfiddle.net/8gQ7U/

Collectives™ on Stack Overflow

How to add custom attribute in HTML 5 for valid markup?

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