Définition dynamique de l'attribut obligatoire HTML5 à l'aide de Javascript

Pour définir dynamiquement l'attribut requis dans HTML5 à l'aide de Javascript, suivez les étapes ci-dessous :

Présentation du problème

Tentative de définition de l'attribut requis à l'aide de la syntaxe recommandée du W3C :

document.getElementById("edName").attributes["required"] = "";

doesn' t déclencher des contrôles de validation.

Méthode correcte pour définir l'attribut booléen de validation HTML5

La manière correcte de définir un attribut booléen de validation HTML5 consiste à utiliser la propriété element.required.

Par exemple :

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

où edName est l'ID de l'élément d'entrée.

Comprendre la valeur de l'attribut

En HTML5, les attributs booléens peuvent être définis soit :

• Laisser l'attribut vide : obligatoire=""
• En utilisant le nom canonique de l'attribut : requis="required"

Cependant, lorsque l'attribut requis est défini dans le balisage, la valeur de l'attribut n'est aucune de ces options :

edName.attributes.required = [object Attr]

Cela est dû au fait que requis est une propriété réfléchie, similaire à l'identifiant, au nom et au type.

Propriétés réfléchies

Les propriétés réfléchies sont des attributs qui existent sur l'objet élément lui-même. La définition de la valeur d'une propriété reflétée met à jour l'attribut correspondant dans le HTML.

Par conséquent, les deux méthodes suivantes sont équivalentes :

Utilisation de la propriété setter :

element.required = true;

Utilisation de setAttribute :

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

Pour effacer un propriété reflétée, utilisez removeAttribute:

element.removeAttribute("required");