Come impostare l’attributo richiesto HTML5 in Javascript?

Sto cercando di contrassegnare una casella di text come richiesto in Javascript.

  

Se il campo è inizialmente contrassegnato come required :

 

quando l’utente tenta di inviare gli viene dato un errore di convalida:

inserisci la descrizione dell'immagine qui

Ma ora voglio impostare l’attributo required su “runtime” , tramite Javascript:

 

con lo script corrispondente:

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

Tranne quando invio ora, non ci sono controlli di convalida, nessun blocco.

Qual è il modo corretto per impostare un attributo booleano di convalida HTML5 ?

jsFiddle

Qual è il valore dell’attributo, chiedi?

L’ attributo required convalida HTML5 è documentato come Boolean :

4.10.7.3.4 L’attributo required

L’attributo required è un attributo booleano . Quando specificato, l’elemento è richiesto.

C’è un sacco di stringhe di mano su come definire un attributo boolean . Le note delle specifiche HTML5:

La presenza di un attributo booleano su un elemento rappresenta il valore vero e l’assenza dell’attributo rappresenta il valore falso.

Se l’attributo è presente, il suo valore deve essere la stringa vuota o un valore che è una corrispondenza senza distinzione tra maiuscole e minuscole ASCII per il nome canonico dell’attributo, senza spazi iniziali o finali.

Ciò significa che è ansible specificare un attributo booleano required due modi diversi:

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

Ma qual è il valore dell’attributo in realtà ?

Quando guardi il mio jsFiddle di questo problema , noterai che se l’attributo required è definito nel markup:

  

Quindi il valore dell’attributo non è la stringa vuota, né il nome canonico dell’attributo:

 edName.attributes.required = [object Attr] 

Questo potrebbe portare a una soluzione.

required è una proprietà riflessa (come id , name , type e così via), quindi:

 element.required = true; 

… dove element è l’elemento DOM di input effettivo, ad esempio:

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

(Solo per completezza.)

Ri:

Quindi il valore dell’attributo non è la stringa vuota, né il nome canonico dell’attributo:

 edName.attributes.required = [object Attr] 

Questo perché required in quel codice è un object attributo , non una stringa; attributes è una NamedNodeMap cui valori sono oggetti Attr . Per ottenere il valore di uno di questi, dovresti esaminare la sua proprietà value . Ma per un attributo booleano, il valore non è rilevante; l’attributo è presente nella mappa (vero) o non presente (falso).

Quindi, se required non viene applicato, lo imposti aggiungendo l’attributo:

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

… che è l’equivalente di element.required = true . Lo cancelleresti rimuovendolo interamente:

 element.removeAttribute("required"); 

… che è l’equivalente di element.required = false .

Ma non dobbiamo farlo con le required , poiché si riflette.

Versione breve

 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 

Versione lunga

Una volta che TJ Crowder è riuscito a indicare proprietà riflesse , ho imparato che la seguente syntax è errata :

 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 

Devi passare attraverso element.getAttribute e element.setAttribute :

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

Questo perché l’attributo contiene effettivamente uno speciale object 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 

Impostando un valore di attributo su “true”, si sta erroneamente impostandolo su un object String , anziché sull’object HtmlAttribute che richiede:

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

Concettualmente l’idea corretta (espressa in un linguaggio tipizzato), è:

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

Ecco perché:

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

esistere. Fanno il lavoro sull’assegnazione del valore all’object HtmlAttribute all’interno.

Oltre a ciò, alcuni attributi sono riflessi . Ciò significa che puoi accedervi più facilmente da 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; 

Quello che non vuoi fare è erroneamente utilizzare la raccolta .attributes :

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

Casi di prova

Ciò ha portato a testare l’utilizzo di un attributo required , confrontando i valori restituiti tramite l’attributo e la proprietà riflessa

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

con risultati:

 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) 

Cercare di accedere direttamente alla raccolta .attributes è sbagliato. Restituisce l’object che rappresenta l’attributo DOM:

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

Questo spiega perché non dovresti mai parlare direttamente agli .attributes . Non stai manipolando i valori degli attributi, ma gli oggetti che rappresentano gli stessi attributi.

Come impostare richiesto?

Qual è il modo corretto di impostare required su un attributo? Hai due scelte, o la proprietà riflessa, o attraverso l’impostazione corretta dell’attributo:

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

A rigor di termini, qualsiasi altro valore “imposterà” l’attributo. Ma la definizione di attributi Boolean impone di impostarla solo sulla stringa vuota "" per indicare true . I seguenti metodi funzionano tutti per impostare l’attributo booleano required ,

ma non li usa :

 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 

Abbiamo già imparato che provare a impostare direttamente l’attributo è sbagliato:

 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 

Come cancellare richiesto?

Il trucco quando tenti di rimuovere l’attributo required è che è facile accenderlo accidentalmente:

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

Con i modi non validi:

 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! 

Quando si utilizza la proprietà riflessa .required , è anche ansible utilizzare qualsiasi valore “falso” per distriggersrlo e valori di verità per triggersrlo. Ma resta fedele al vero e falso per chiarezza.

Come verificare la required ?

Verifica la presenza dell’attributo tramite il .hasAttribute("required") :

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

Puoi anche verificarlo tramite la proprietà booleana riflessa .required :

 if (edName.required) { } 

E la versione jquery:

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

So che è oltre la domanda, ma forse qualcuno troverà questo utile 🙂

Ciò che conta non è l’attributo ma la proprietà , e il suo valore è un valore booleano.

Puoi impostarlo usando

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

prova questo ..

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