Comment définir l'attribut obligatoire de HTML5 à l'aide de Javascript ?

Question

J'essaie de marquer la text zone de saisie comme obligatoire en Javascript.

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

Si le champ était initialement coché required :

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

Lorsque les utilisateurs tentent de soumettre, ils reçoivent une erreur de validation :

Mais maintenant, je veux définir la propriété required au "runtime" via Javascript :

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

Utilisez le script correspondant :

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

Aucun contrôle de validation, aucun blocage sauf si je soumets maintenant.

Quelle est la manière correcte de configurer les attributs booléens de validation HTML5  ?

jsFiddle

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

Validation HTML5 required 属性记录为 Boolean Attributs documentés comme Booléen :

4.10.7.3.4 required Propriétés

La propriété

required est une propriété booléenne. Lorsqu'il est spécifié, cet élément est obligatoire.

Il y a beaucoup de choses ennuyeuses sur la façon de définir les boolean propriétés. Commentaires sur la spécification HTML5 :

La présence d'un attribut booléen sur l'élément

représente une vraie valeur, et l'absence de cet attribut représente une fausse valeur.

Si l'attribut est présent, sa valeur doit être une chaîne vide ou une valeur ASCII insensible à la casse qui correspond au nom canonique de l'attribut et ne comporte aucun espace de début ou de fin.

Cela signifie que vous pouvez spécifier les propriétés required booléennes de deux manières différentes :

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

Mais quelle est réellement la valeur de l'attribut ?

Quand vous regardez mon jsFiddle pour cette question, vous remarquerez que si l'attribut required est défini dans le balisage :

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

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

edName.attributes.required = [object Attr]

Cela pourrait conduire à une solution.

Answer 1

required 是一个反射属性 （例如 id、name、type etc.), donc :

element.required = true;

...où element 是实际的 input éléments DOM, par exemple :

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

---

(Juste pour être complet.)

Réponse :

C'est à cause de l'attribut required 是一个属性对象，而不是字符串； 属性是< code>NamedNodeMap 其值为 Attr对象。要获取其中之一的值，您需要查看其 value dans ce code. Mais pour les propriétés booléennes, la valeur n'a pas d'importance ; la propriété est soit présente dans la carte (vrai), soit non (faux).

Donc, si required n'est pas reflété, vous pouvez le définir en ajoutant une propriété :

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

...équivalent à element.required = true. Vous pouvez l'effacer en le supprimant complètement :

element.removeAttribute("required");

...équivalent à element.required = false.

Mais nous n’avons pas besoin de faire ça pour required car cela se reflète déjà.

Answer 2

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 que T.J. Crowder a réussi à signaler la propriété réfléchie, j'ai appris la syntaxe erreur suivante :

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 réussir element.getAttribute和element.setAttribute :

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

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

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 la valeur de l'attribut sur "true", vous la définissez par erreur sur un objet String au lieu de l'objet HtmlAttribute dont il a besoin :

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 en langage typographique) est :

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

Voici pourquoi :

• getAttribute(名称)
• setAttribute(名称, 值)

Existence. Ils sont responsables de l'attribution de valeurs aux objets internes HtmlAttribute.

De plus, cela reflète également certains attributs. Cela signifie que vous y avez un meilleur accès via 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 faire, c'est utiliser la .attributescollection de manière incorrecte :

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

Cas de test

Cela conduit à des tests autour de l'utilisation de l'attribut required, en comparant la valeur renvoyée via cet attribut à l'attribut réfléchi

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

Résultat :

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

Tenter d'accéder directement à la collection .attributes est une erreur. Il renvoie un objet représentant une propriété DOM :

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

Cela explique pourquoi il ne faut jamais parler directement à une .attributescollection. Vous ne manipulez pas la valeur de la propriété, mais l'objet qui représente la propriété elle-même.

Comment définir les champs obligatoires ?

Quelle est la bonne façon de placer required sur une propriété ? Vous avez deux options, soit en reflétant les propriétés, soit en définissant correctement les propriétés :

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

À proprement parler, toute autre valeur « définit » la propriété. Cependant, la définition de l'attribut Boolean indique qu'il ne peut être défini que sur la chaîne vide "" pour indiquer Boolean 属性的定义规定，只能将其设置为空字符串 "" 来指示 true。以下方法都可以设置requiredtrue. Les méthodes suivantes peuvent définir

Booleanattributs,

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 appris qu'essayer de définir directement les propriétés est une erreur :

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 les champs obligatoires ? required

L'astuce lorsque l'on essaie de

supprimer

une propriété est qu'il est facile de l'ouvrir accidentellement : .required

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

Méthode invalide :

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é de la réflexion, vous pouvez également utiliser n'importe quelle valeur "falsey" pour la désactiver, et utiliser une valeur vraie pour l'activer. Mais par souci de clarté, tenez-vous-en au bien et au mal. 必需

Comment

vérifier .hasAttribute("required") s'il y a

 ?

Vérifiez si le bien existe via la méthode  : .required

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

Vous pouvez également vérifier via 🎜Boolean🎜 les propriétés 🎜 réfléchies : 🎜

if (edName.required)
{
}