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

Question

J'essaie de marquer une zone de saisie text comme required dans 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 de soumettre une erreur de validation lui est donnée:

Mais maintenant, je veux définir l'attribut required à "runtime", via 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 quand je soumets maintenant, il n'y a pas de vérification de validation, pas de blocage.

Quel est le moyen correct de définir un attribut booléen de validation HTML5?

jsFiddle

Quelle est la valeur de l'attribut, demandez-vous?

L'attribut validation HTML5 required est documenté sous la forme Boolean:

4.10.7.3.4 La required attribut

L'attribut required est un attribut boolean . Lorsque spécifié, l'élément est requis.

Il y a beaucoup de difficultés à définir un attribut boolean. Les notes de spécifications HTML5:

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 correspondre à la chaîne vide ou à une correspondance ASCII sans distinction de casse pour le nom canonique de l'attribut, sans espace blanc de début ou de fin.

Cela signifie que vous pouvez spécifier un attribut required _ boolean 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 l'attribut required est défini dans le balisage:

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

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

edName.attributes.required = [object Attr]

Cela pourrait conduire à une solution.

Answer 1

Version courte

element.setAttribute("required", "");    //turns required on
element.required = true;                 //turns required on through reflected attribute
jQuery(element).attr('required', '');    //turns required on
$("#elementId").attr('required', '');    //turns required on

element.removeAttribute("required");     //turns required off
element.required = false;                //turns required off through reflected attribute
jQuery(element).removeAttr('required');  //turns required off
$("#elementId").removeAttr('required');  //turns required off

if (edName.hasAttribute("required")) { }  //check if required
if (edName.required) { }                 //check if required using reflected attribute

Version longue

Une fois T.J. Crowder a réussi à souligner propriétés réfléchies , j’ai appris que la syntaxe suivante est fausse :

element.attributes["name"] = value; //bad! Overwrites the HtmlAttribute object
element.attributes.name = value;    //bad! Overwrites the HtmlAttribute object
value = element.attributes.name;    //bad! Returns the HtmlAttribute object, not its value
value = element.attributes["name"]; //bad! Returns the HtmlAttribute object, not its value

Vous devez passez par element.getAttribute et element.setAttribute:

element.getAttribute("foo");         //correct
element.setAttribute("foo", "test"); //correct

En effet, l'attribut contient en fait un objet spécial HtmlAttribute :

element.attributes["foo"];           //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo;              //returns HtmlAttribute object, not the value of the attribute

En définissant une valeur d'attribut sur "true", vous la définissez par erreur sur un objet String plutôt que sur l'objet . HtmlAttribute objet requis:

element.attributes["foo"] = "true";  //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object

Conceptuellement, l'idée correcte (exprimée dans un langage typé) est:

HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;

C'est pourquoi:

• getAttribute(name)
• setAttribute(name, value)

exister. Ils font le travail sur l'attribution de la valeur à l'objet HtmlAttribute à l'intérieur.

En plus de cela, certains attributs sont reflétés . Cela signifie que vous pouvez y accéder plus facilement à partir de Javascript:

//Set the required attribute
//element.setAttribute("required", ""); 
element.required = true;

//Check the attribute
//if (element.getAttribute("required")) {...}
if (element.required) {...}

//Remove the required attribute
//element.removeAttribute("required");
element.required = false;

Ce que vous ne voulez pas utilisez par erreur la collection .attributes:

element.attributes.required = true;     //WRONG!
if (element.attributes.required) {...}  //WRONG!
element.attributes.required = false;    //WRONG!

Cas de test

Cela a conduit à tester l'utilisation d'un attribut required, en comparant les valeurs renvoyées par l'attribut et la propriété reflétée.

document.getElementById("name").required;
document.getElementById("name").getAttribute("required");

avec des résultats:

HTML                         .required        .getAttribute("required")
==========================   ===============  =========================
<input>                      false (Boolean)  null (Object)
<input required>             true  (Boolean)  "" (String)
<input required="">          true  (Boolean)  "" (String)
<input required="required">  true  (Boolean)  "required" (String)
<input required="true">      true  (Boolean)  "true" (String)
<input required="false">     true  (Boolean)  "false" (String)
<input required="0">         true  (Boolean)  "0" (String)

Essayer d'accéder directement à la collection .attributes est une erreur. Il retourne l'objet qui représente l'attribut DOM:

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

Ceci explique pourquoi vous ne devriez jamais parler directement à la collection .attributes. Vous ne manipulez pas les valeurs des attributs, mais les objets qui représentent les attributs eux-mêmes.

Comment définir requis?

Quelle est la bonne façon de définir required sur un attribut? Vous avez deux choix, soit le propriété reflété, soit en définissant correctement l'attribut:

element.setAttribute("required", "");         //Correct
edName.required = true;                       //Correct

Strictement parlant, toute autre valeur "définira" l'attribut. Mais la définition des attributs Boolean indique qu'elle ne doit être définie que sur la chaîne vide "" pour indiquer true. Les méthodes suivantes fonctionnent toutes pour définir la required Boolean attribut,

mais ne les utilisez pas :

element.setAttribute("required", "required"); //valid, but not preferred
element.setAttribute("required", "foo");      //works, but silly
element.setAttribute("required", "true");     //Works, but don't do it, because:
element.setAttribute("required", "false");    //also sets required boolean to true
element.setAttribute("required", false);      //also sets required boolean to true
element.setAttribute("required", 0);          //also sets required boolean to true

Nous avons déjà appris qu'il est erroné d'essayer de définir l'attribut directement:

edName.attributes["required"] = true;       //wrong
edName.attributes["required"] = "";         //wrong
edName.attributes["required"] = "required"; //wrong
edName.attributes.required = true;          //wrong
edName.attributes.required = "";            //wrong
edName.attributes.required = "required";    //wrong

Comment effacer nécessaire?

L'astuce lorsque vous essayez de supprimer l'attribut required est qu'il est facile de l'activer accidentellement:

edName.removeAttribute("required");     //Correct
edName.required = false;                //Correct

Avec les chemins invalides:

edName.setAttribute("required", null);    //WRONG! Actually turns required on!
edName.setAttribute("required", "");      //WRONG! Actually turns required on!
edName.setAttribute("required", "false"); //WRONG! Actually turns required on!
edName.setAttribute("required", false);   //WRONG! Actually turns required on!
edName.setAttribute("required", 0);       //WRONG! Actually turns required on!

Lorsque vous utilisez la propriété reflétée .required, vous pouvez également utiliser n’importe quelle valeur "falsey" pour la désactiver, ainsi que des valeurs de vérité pour l’activer. Mais tenez-vous en au vrai et au faux pour plus de clarté.

Comment check pour required?

Vérifiez la présence de l'attribut via la méthode .hasAttribute("required"):

if (edName.hasAttribute("required"))
{
}

Vous pouvez également le vérifier via la propriété Boolean reflétée .required:

if (edName.required)
{
}

Answer 2

required est une propriété reflétée (comme id, name, type et autres), donc:

element.required = true;

... où element est le input élément réel du DOM, par exemple:

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

---

(Juste pour être complet.)

Ré:

Alors la valeur de l'attribut n'est pas la chaîne vide, ni le nom canonique de l'attribut:

edName.attributes.required = [object Attr]

C'est parce que required dans ce code est un objet attribut, pas une chaîne; attributes est un NamedNodeMap dont les valeurs sont Attr objets . Pour obtenir la valeur de l’un d’eux, regardez sa propriété value. Mais pour un attribut booléen, la valeur n'est pas pertinente; l'attribut est présent dans la carte (vrai) ou non présent (faux).

Donc, si requiredn'était pas reflété, vous le définiriez en ajoutant l'attribut:

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

... qui est l'équivalent de element.required = true. Vous voudriez le supprimer en le supprimant entièrement:

element.removeAttribute("required");

... qui est l'équivalent de element.required = false.

Mais nous n’avons pas à faire cela avec required, car cela se reflète.

Answer 3

Et la version jquery:

$('input').attr('required', true)
$('input').attr('required', false)

Je sais que cela dépasse la question, mais peut-être que quelqu'un trouvera cela utile :)

Answer 4

L'important n'est pas l'attribut mais la propriété et sa valeur est un booléen.

Vous pouvez le configurer en utilisant 

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

Answer 5

let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
  formelem.required = true;

});

Si vous souhaitez effectuer toutes les saisies, textarea et sélectionner les éléments requis.