Question

I have code like this:

<input required>

In good browsers I can use jquery like this to add a class of error to the input:

$('input[required]').addClass('error');

It doesn’t work in IE though. I will resort to this otherwise, but it’s not as neat…

HTML:

<input data-required=true>

Javascript:

if( $('input').data('required') ) $('input').addClass('error');

Any ideas?

Thanks,
Will

EDIT:

Yea, I am using HTML5.

IE actually interprets this:

<input required>

as:

<input required="">

So it is possible to check that like this:

if( $('input').prop() == undefined )

But again, it’s a bit of a messy way of doing things, especially considering that it is only IE that has the issue. This code works perfectly in all other browsers.

I am basically asking if there is a method of checking that is cross browser and tidy. I’m a bit of a perfectionist perhaps! 😉

Answer 1

using data- attribute is safe and your page will be valid if you use them. But you need qoutation for your value. I’m using data attributes all the time. We support IE7.

<input data-required="true">

Or even you can leave the value in cases like this:

<input data-required>

If you are using data attributes often then it’s good to know that you can use dataset property in Chrome developer tools (and Firebug) to access your element’s data attributes via console. It’s not safe yet to use dataset API in your code. it’s not supported in IE8

in your console write:

$$('input')[0].dataset

and get the data attribute values and properties!