title: Setting an attribute named "required" and any value, with JQuery, doesn't work
body: <p>This doesn't work:</p>
  
  <pre><code>$("#elementId").attr("required", "true");
  </code></pre>
  
  <p>In both Chrome and Firefox, the DOM produces either <code>required</code> as the attribute (no value) or <code>required=""</code> (empty value).</p>
  
  <p>And it doesn't matter that the value in this example is "true".  If you try "asdf" the same thing happens.</p>
  
  <p>What's odd is that I believe this <em>used</em> to work because this new code is part of a large project that's been ongoing for several years.</p>
  
  <p>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 <a href="http://diveintohtml5.info/forms.html#required" rel="noreferrer">required</a> attribute as an HTML5 reserved keyword.  I added the <a href="http://diveintohtml5.info/forms.html#validation" rel="noreferrer">novalidate</a> attribute, thinking that that might turn off any form-related HTML5-ness.  No such luck.</p>
  
  <p>Thoughts?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>To clarify, this only happens with JQuery.  If I say this, it works:</p>
  
  <pre><code>$("#elementId")[0].setAttribute("required", "true");
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>The crux of the matter is this...</p>
  
  <p>Why does using JQuery's <code>attr()</code> method not work when the regular <code>setAttribute()</code> method does?  Doesn't the <code>attr()</code> method call <code>setAttribute()</code> at some point lower down?</p>
  
  <p>That is what is so confusing.  Chrome and Firefox are perfectly fine setting <code>required="true"</code> if you use setAttribute().</p>