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 à faire remarquer propriétés réfléchies j'ai appris que la syntaxe suivante est mauvais :
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 doit passer à travers element.getAttribute y element.setAttribute :
element.getAttribute("foo"); //correct
element.setAttribute("foo", "test"); //correct
Cela est dû au fait que l'attribut contient en fait un caractère spécial HtmlAttribut objet :
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 attribuant la valeur "true" à un attribut, vous lui attribuez par erreur une valeur de Chaîne de caractères plutôt que l'objet HtmlAttribut l'objet 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 dans un langage typé) est la suivante :
HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;
Voilà pourquoi :
getAttribute(name)setAttribute(name, value)
exister. Ils se chargent d'attribuer la valeur à l'objet HtmlAttribute qu'ils contiennent.
En plus de cela, certains attributs sont réfléchi . 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 le fais pas. veut faire est d'utiliser par erreur le .attributes collection :
element.attributes.required = true; //WRONG!
if (element.attributes.required) {...} //WRONG!
element.attributes.required = false; //WRONG!
Cas de test
Cela a conduit à des essais autour de l'utilisation d'un required en comparant les valeurs renvoyées par l'attribut et la propriété réfléchie.
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 au .attributes La collecte directe est une erreur. Il retourne l'objet qui représente l'attribut DOM :
edName.attributes["required"] => [object Attr]
edName.attributes.required => [object Attr]
Cela explique pourquoi vous ne devriez jamais parler au .attributes collecter directement. Vous ne manipulez pas le valeurs des attributs, mais les objets qui représentent les attributs eux-mêmes.
Comment fixer les exigences ?
Quelle est la façon correcte de régler required sur un attribut ? Vous avez deux choix, soit la méthode réfléchie propriété ou en définissant correctement l'attribut :
element.setAttribute("required", ""); //Correct
edName.required = true; //Correct
À proprement parler, toute autre valeur "définira" l'attribut. Mais la définition de Boolean Les attributs dictent qu'il ne doit être défini que par la chaîne vide. "" d'indiquer vrai . Les méthodes suivantes fonctionnent toutes pour set el required Booléen attribut,
mais ne pas utiliser les :
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'essayer de définir l'attribut directement 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 clair nécessaire ?
L'astuce pour essayer de supprimer el required l'attribut est qu'il est facile de l'allumer accidentellement :
edName.removeAttribute("required"); //Correct
edName.required = false; //Correct
Avec les moyens non valables :
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!
Lors de l'utilisation de la réflexion .required vous pouvez également utiliser n'importe quelle propriété "faux" pour le désactiver, et des valeurs véridiques pour l'activer. Mais il suffit de s'en tenir à vrai et faux pour plus de clarté.
Comment vérifier pour required ?
Vérifier la présence de l'attribut par l'intermédiaire de la fonction .hasAttribute("required") méthode :
if (edName.hasAttribute("required"))
{
}
Vous pouvez également le vérifier par le biais du Booléen réfléchi .required propriété :
if (edName.required)
{
}
