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
Validation HTML5 required
屬性記錄為 Boolean
Attributs documentés comme Booléen
?:
4.10.7.3.4
La propriétérequired
Propriétés
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émentrepré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
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.
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
是一個屬性對象,而不是字符串; 屬性
是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à.
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
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 .attributes
collection de manière incorrecte?:
element.attributes.required = true; //WRONG! if (element.attributes.required) {...} //WRONG! element.attributes.required = false; //WRONG!
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 .attributes
collection. Vous ne manipulez pas la valeur de la propriété, mais l'objet qui représente la propriété elle-même.
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
屬性的定義規(guī)定,只能將其設(shè)置為空字符串 ""
來指示 true。以下方法都可以設(shè)置required
true. Les méthodes suivantes peuvent définir
Booleanattributs,
Mais
ne les utilisez paselement.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 trueNous 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
supprimer
une propriété est qu'il est facile de l'ouvrir accidentellement?: .required
edName.removeAttribute("required"); //Correct edName.required = false; //CorrectMé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.
必需
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) { }