Kurzfassung
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
Lange Version
Nachdem es TJ Crowder gelungen war, auf reflektierte Eigenschaften hinzuweisen, stellte ich fest, dass die folgende Syntax falsch ist :
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
Sie müssen durchgehen element.getAttributeund element.setAttribute:
element.getAttribute("foo"); //correct
element.setAttribute("foo", "test"); //correct
Dies liegt daran, dass das Attribut tatsächlich ein spezielles HtmlAttribute- Objekt enthält:
element.attributes["foo"]; //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo; //returns HtmlAttribute object, not the value of the attribute
Wenn Sie einen Attributwert auf "true" setzen, setzen Sie ihn fälschlicherweise auf ein String- Objekt und nicht auf das erforderliche HtmlAttribute- Objekt:
element.attributes["foo"] = "true"; //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object
Konzeptionell ist die richtige Idee (ausgedrückt in einer getippten Sprache):
HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;
Deshalb:
getAttribute(name)setAttribute(name, value)
existieren. Sie arbeiten daran, den Wert dem darin enthaltenen HtmlAttribute-Objekt zuzuweisen.
Hinzu kommt, sind einige Attribute reflektiert . Dies bedeutet, dass Sie über Javascript besser auf sie zugreifen können:
//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;
Was Sie nicht tun möchten, ist fälschlicherweise die .attributesSammlung zu verwenden:
element.attributes.required = true; //WRONG!
if (element.attributes.required) {...} //WRONG!
element.attributes.required = false; //WRONG!
Fälle testen
Dies führte zu Tests zur Verwendung eines requiredAttributs, zum Vergleich der über das Attribut zurückgegebenen Werte und der reflektierten Eigenschaft
document.getElementById("name").required;
document.getElementById("name").getAttribute("required");
mit Ergebnissen:
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)
Der Versuch, .attributesdirekt auf die Sammlung zuzugreifen, ist falsch. Es gibt das Objekt zurück, das das DOM-Attribut darstellt:
edName.attributes["required"] => [object Attr]
edName.attributes.required => [object Attr]
Dies erklärt, warum Sie niemals .attributesdirekt mit der Sammlung sprechen sollten . Sie bearbeiten nicht die Werte der Attribute, sondern die Objekte, die die Attribute selbst darstellen.
Wie wird eingestellt?
Wie kann requiredein Attribut richtig festgelegt werden? Sie haben zwei Möglichkeiten, entweder die reflektierte Eigenschaft oder die korrekte Einstellung des Attributs:
element.setAttribute("required", ""); //Correct
edName.required = true; //Correct
Streng genommen "setzt" jeder andere Wert das Attribut. Die Definition von BooleanAttributen schreibt jedoch vor, dass nur die leere Zeichenfolge festgelegt werden muss "", um true anzuzeigen . Die folgenden Methoden dienen alle zum Festlegen des required Booleschen Attributs:
aber benutze sie nicht:
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
Wir haben bereits gelernt, dass der Versuch, das Attribut direkt festzulegen, falsch ist:
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
Wie zu löschen erforderlich?
Der Trick beim Entfernen des requiredAttributs besteht darin, dass es leicht versehentlich aktiviert werden kann:
edName.removeAttribute("required"); //Correct
edName.required = false; //Correct
Mit den ungültigen Wegen:
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!
Wenn Sie die reflektierte .requiredEigenschaft verwenden, können Sie auch beliebige "Falsey" -Werte verwenden, um sie auszuschalten, und wahrheitsgemäße Werte, um sie einzuschalten. Aber bleiben Sie zur Klarheit einfach bei wahr und falsch.
Wie überprüfe ich required?
Überprüfen Sie das Vorhandensein des Attributs mithilfe der folgenden .hasAttribute("required")Methode:
if (edName.hasAttribute("required"))
{
}
Sie können dies auch über die boolesche reflektierte .requiredEigenschaft überprüfen :
if (edName.required)
{
}
required="false", haben sie jemals eine Vorlage geschrieben, bevor sie den Standard geschrieben haben? Bedingte Attribute sind normalerweise ein Schmerz, es ist viel einfacher, diesen Booleschen Wert einfach in den Attributwert zu setzen ...