16

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().

Matt
  • 74,352
  • 26
  • 153
  • 180
sohtimsso1970
  • 3,216
  • 4
  • 28
  • 38
  • I tested with FF3.6 and worked! On this page: $('.prettyprint').attr('required', 'something') – Taha Jahangir Apr 25 '11 at 18:00
  • Just wanted to add that I tested this in every jQuery version available on jsFiddle on FF4 and it indeed won;t set the value to anything but empty string, while bool `false` still does remove the attribute. – Wesley Murch Apr 25 '11 at 18:02
  • To preserve MadMartigan's reproduction of this bug: http://jsfiddle.net/Madmartigan/GnV98/ – StriplingWarrior Apr 25 '11 at 18:12
  • @sohtimsso1970 when you say "doesn't work", do you mean that you explicitly want to set the required attribute to a specific string? It still "works" in the sense that it makes the field required, you actually don't need a value as I'm sure you know. – Wesley Murch Apr 25 '11 at 18:13
  • 4
    Try this: `$("#elementId").attr("required", "required");` – Ketan Modi Apr 25 '11 at 18:24
  • 1
    Alternatively You could use the jQuery `.data()` method to store anything `$("elementID").data("required","asd")` – Pablo Apr 25 '11 at 18:25
  • 1
    @Madmartigan I mean that I specifically want the "true" value and nothing else. HTML5 browsers will recognize the required attribute, true, but we actually don't want to use HTML5 validation and stick with our own. We have `novalidate` on forms to make sure HTML5 validation doesn't pop up. – sohtimsso1970 Apr 25 '11 at 20:21

5 Answers5

20

You can use prop to achieve this:

$("#elementId").prop("required", true);

Corresponding documentation: http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

toutpt
  • 5,145
  • 5
  • 38
  • 45
  • 1
    I may be mistaken, but doesn't `.prop()` change the element's "property" in the DOM, and *not* its "attribute". The difference between `prop` and `attr` is subtle, and one I'm still trying to wrap my head around, especially with the changes in jQuery 1.9. – Zach Lysobey Mar 20 '13 at 16:49
11

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

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • Yep, we're abusing the attribute for javascript hooks. We've been using `required="true"` for several years now so our validation stuff knows which ones to look for. I know that that isn't XHTML proper, but it was always the best option at the time. – sohtimsso1970 Apr 25 '11 at 20:18
  • 2
    Time to switch to the `data-` attribute. Google it or check SO if you aren't sure what I mean (could not find a good reference atm). – Wesley Murch Apr 25 '11 at 20:29
  • Great suggestion. Never heard of those before. ([Here's a ref](http://www.javascriptkit.com/dhtmltutors/customattributes.shtml)) – sohtimsso1970 Apr 25 '11 at 20:32
  • Yeah I just didn't want to endorse any particular reference. There's a lot of misinformation out there. Is the only value you're using "true"? If so, it's trivial to just check for the existence of the attribute instead. – Wesley Murch Apr 25 '11 at 20:33
  • The library we're using (homegrown) checks that the value is "true", not just that the attribute exists, unfortunately. So required="false" is also a possible option. – sohtimsso1970 Apr 25 '11 at 20:34
  • Either way, sounds like an easy fix, but it still is somewhat of a wonder that jQuery won't let you assign arbitrary string values (which is legal afaik). Still, this is a good example of straying from standards coming back to bite you in the ass. – Wesley Murch Apr 25 '11 at 20:35
7

The way I got this working was to implement the following good old javascript in place of any jQuery:

document.getElementById("inputid").required = true;

or, (obviously)

document.getElementById("inputid").required = false;

depending on requirements.

The source of my solution is here.

I have read through .attr() and .prop() pages on the jQuery API, and there seems to be no support for the "required" attribute - but I am open to correction.

Community
  • 1
  • 1
collyg
  • 171
  • 1
  • 7
0

I use this fairly often and I haven't noticed any problems with it.

$("#elementId").attr("required", "required");

Note: I have try this but I could NOT get it working:

$("#elementId").attr("required");

Even though required is now a boolean attribute, simply adding the attribute name (without the value) does not appear to be too compatible with different versions of different browsers. Stick with my original example above and you should be fine.

Randy Greencorn
  • 3,864
  • 2
  • 22
  • 15
0

For input required, it works much better if you remove the attribute vs. setting it to false

$('#elementId').removeAttr('required');
rdaniels
  • 939
  • 8
  • 7