This doesn't work:
$("#elementId").attr("required", "true");
In both Chrome and Firefox, the DOM produces either required
as the attribute (no value) or required=""
(empty value).
And it doesn't matter that the value in this example is "true". If you try "asdf" the same thing happens.
What's odd is that I believe this used to work because this new code is part of a large project that's been ongoing for several years.
The only thing I can think of is that my Chrome (v10) and Firefox (v4) are now both sufficiently advanced that they're recognizing the required attribute as an HTML5 reserved keyword. I added the novalidate attribute, thinking that that might turn off any form-related HTML5-ness. No such luck.
Thoughts?
Edit:
To clarify, this only happens with JQuery. If I say this, it works:
$("#elementId")[0].setAttribute("required", "true");
Is there a bug in JQuery? Any idea why this only happens with JQuery? Our development team likes all code to go through JQuery where possible. I can use the straight setAttribute JavaScript method, but would rather use a JQuery solution that works.
Edit 2:
The crux of the matter is this...
Why does using JQuery's attr()
method not work when the regular setAttribute()
method does? Doesn't the attr()
method call setAttribute()
at some point lower down?
That is what is so confusing. Chrome and Firefox are perfectly fine setting required="true"
if you use setAttribute().
If the input elements aren't inside a form tag then HTML5 required attribute will fail to work. So always put input tags inside a form along with the form encapsulation itself.
$("input"). attr("required", "true");
jQuery val() Method The val() method returns or sets the value attribute of the selected elements. When used to return value: This method returns the value of the value attribute of the FIRST matched element.
jQuery [attribute|=value] Selector The [attribute|=value] selector selects each element with a specified attribute, with a value equal to a specified string (like "en") or starting with that string followed by a hyphen (like "en-us"). Tip: This selector is often used to handle language attributes.
You can use prop to achieve this:
$("#elementId").prop("required", true);
Corresponding documentation: http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-
It is indeed browser related. I checked in IE8 and it will apply whatever string value you set to the required attribute.
Since you don't need any value (only the attribute must be present), this won't affect default behavior. If you are abusing the attribute value for javascript hooks, that's another thing :)
<input required>
is the same as <input required="">
and <input required="honky-tonk">
Since IE8 doesn't support html5, it's just like setting a made-up attribute, so you could set $("input").attr("derp", "derty")
and it would assign it to the element.
My guess is that jquery uses the required=""
for folks who wish to use this in XHTML strict syntax, while still conforming to HTML5 standards.
http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
http://dev.w3.org/html5/spec/Overview.html#boolean-attribute
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With