jQuery *= Selector not working in IE8

Question

For some reason, I am not able to get this to work under IE8. Works fine in Chrome.

This is the element I am looking for:

<input type="text" captures_name="default" name="firstname" required="S01 S02"/>

this the jQuery (1.9.1) I am using:

$("input[captures_name='default'][name='firstname']") //Match

$("input[captures_name='default'][required*='S01']") //Does Not Match

$("input[captures_name='default'][required*='S02']") //Does Not Match

$("input[captures_name='default'][required='S01 S02']") //Does Not Match

I want to be able to find the element based on a single value in the required attribute. I'm sure I am just over looking something.... Can someone lend me a pair of eyes?

Thanks in advance for your help

Answer 1

According to the W3C specs for HTML5 the required attribute is a boolean attribute, meaning it's either true or false.

required = "required" or "" (empty string) or empty.

Specifies that the element is a required part of form submission.

So you can set it like:

<input type="text" name="firstname" required />
<input type="text" name="firstname" required="required" />

It can't really hold any other values, even if jQuery might be able to get such values using attr() . The correct way to check it or set it would be .prop('required') and .prop('required', true) etc.

In other words your selector is based on invalid markup, which is not a good idea.