Ian Boyd Ian Boyd - 5 months ago 101x
Javascript Question

How to set HTML5 required attribute in Javascript?

I am trying to mark a

input box as required in Javascript.

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

If the field is initially marked as

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

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

enter image description here

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

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

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?


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

The HTML5 validation
attribute is documented
as a
: The

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

There is a lot of hand-wringing about how to define a
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
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
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.


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


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:


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

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