How to set HTML5 required attribute in Javascript?

Question

I am trying to mark a text input box as required in Javascript.

<input id="edName" type="text" id="name">

If the field is initially marked as required:

<form>
    <input id="edName" type="text" id="name" required><br>
    <input type="submit" value="Search">
</form>

when the user tries to submit they are given a validation error:

But now I want to set the required attribute at "runtime", through Javascript:

<form>
    <input id="edName" type="text" id="name"><br>
    <input type="submit" value="Search">
</form>

with the corresponding script:

//recommended W3C HTML5 syntax for boolean attributes
document.getElementById("edName").attributes["required"] = "";         

Except when I submit now, there is no validation check, no block.

What is the correct way to set an HTML5 validation boolean attribute?

jsFiddle

What's the value of the attribute, you ask?

The HTML5 validation required attribute is documented as a Boolean:

4.10.7.3.4 The required attribute

The required attribute is a boolean attribute. When specified, the element is required.

There is a lot of hand-wringing about how to define a boolean attribute. The HTML5 spec notes:

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

This means that you can specify a required boolean attribute two different ways:

edName.attributes.required = ""; //the empty string
edName.attributes.required = "required"; //the attribute's canonical name

But what is the value of the attribute really?

When you look at my jsFiddle of this problem, you'll notice that if the required attribute is defined in the markup:

<input id="edName" type="text" id="name" required>

Then the attribute's value is not the empty string, nor the canonical name of the attribute:

edName.attributes.required = [object Attr]

That might lead to a solution.

Answer 1

required is a reflected property (like id, name, type, and such), so:

element.required = true;

...where element is the actual input DOM element, e.g.:

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

---

(Just for completeness.)

Re:

Then the attribute's value is not the empty string, nor the canonical name of the attribute:

edName.attributes.required = [object Attr]

That's because required in that code is an attribute object, not a string; attributes is a NamedNodeMap whose values are Attr objects. To get the value of one of them, you'd look at its value property. But for a boolean attribute, the value isn't relevant; the attribute is either present in the map (true) or not present (false).

So if required weren't reflected, you'd set it by adding the attribute:

element.setAttribute("required", "");

...which is the equivalent of element.required = true. You'd clear it by removing it entirely:

element.removeAttribute("required");

...which is the equivalent of element.required = false.

But we don't have to do that with required, since it's reflected.