Comment définir l'attribut obligatoire HTML5 en Javascript ?

Question

J'essaie de marquer un text la boîte de saisie comme requis en Javascript.

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

Si le champ est initialement marqué comme required :

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

lorsque l'utilisateur essaie d'envoyer le formulaire, il reçoit une erreur de validation :

Mais maintenant, je veux définir le required attribut à "runtime" par le biais de Javascript :

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

avec le script correspondant :

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

Sauf que lorsque je soumets maintenant, il n'y a pas de contrôle de validation, pas de blocage.

Quel est le correct manière d'établir un Attribut booléen de validation HTML5 ?

jsFiddle

Quelle est la valeur de cet attribut, demandez-vous ?

La validation HTML5 required est documenté en tant que Boolean :

4.10.7.3.4 Les required attribut

Le site required est un attribut attribut booléen . Lorsqu'il est spécifié, l'élément est obligatoire.

On s'interroge beaucoup sur la manière de définir une boolean attribut. La spécification HTML5 note :

La présence d'un attribut booléen sur un élément représente la valeur vraie, et l'absence de l'attribut représente la valeur fausse.

Si l'attribut est présent, sa valeur doit être soit la chaîne vide, soit une valeur qui correspond au nom canonique de l'attribut sans tenir compte de la casse, sans espace avant ou après.

Cela signifie que vous pouvez spécifier un required boolean attribut de deux manières différentes :

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

Mais quelle est la valeur de l'attribut vraiment ?

Quand vous regardez mon jsFiddle de ce problème vous remarquerez que si le required est défini dans le balisage :

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

La valeur de l'attribut est alors no la chaîne vide, ni le nom canonique de l'attribut :

edName.attributes.required = [object Attr]

Cela pourrait conduire à une solution.

Answer 1

Essayez ceci

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