Ian Boyd Ian Boyd - 6 months ago 168
Javascript Question

How to set HTML5 required attribute in Javascript?

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:

enter image description here

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

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.

Comments