Sto cercando di contrassegnare una textcasella di input come richiesto in Javascript.

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

Se il campo è inizialmente contrassegnato come required:

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

quando l'utente prova a inviare, riceve un errore di convalida:

Ma ora voglio impostare l' requiredattributo in "runtime" , tramite Javascript:

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

con lo script corrispondente:

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

Tranne quando invio ora, non vi è alcun controllo di convalida, nessun blocco.

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

jsFiddle

Qual è il valore dell'attributo, chiedi?

L' requiredattributo di convalida HTML5 è documentato come Boolean:

4.10.7.3.4 L' requiredattributo

L' requiredattributo è un attributo booleano . Quando specificato, l'elemento è obbligatorio.

C'è un sacco di stronzate su come definire un booleanattributo. Le note sulle 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 una stringa vuota o un valore che sia una corrispondenza ASCII senza distinzione tra maiuscole e minuscole per il nome canonico dell'attributo, senza spazi iniziali o finali.

Ciò significa che puoi specificare un attributo required booleano in due modi diversi:

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

Ma qual è realmente il valore dell'attributo ?

Quando guardi il mio jsFiddle di questo problema , noterai che se l' requiredattributo è definito nel markup:

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

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

edName.attributes.required = [object Attr]

Ciò potrebbe portare a una soluzione.

requiredè una struttura riflessa (come id, name, type, e simili), quindi:

element.required = true;

... dove si elementtrova l' inputelemento DOM 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é requiredin quel codice c'è un oggetto attributo , non una stringa; attributesè un i NamedNodeMapcui valori sono Attroggetti . Per ottenere il valore di uno di loro, dovresti guardare la sua valueproprietà. Ma per un attributo booleano, il valore non è rilevante; l'attributo è presente nella mappa (true) o non presente (false).

Quindi, se required non fossero riflessi, lo avresti impostato aggiungendo l'attributo:

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

... che è l'equivalente di element.required = true. Lo cancelleresti rimuovendolo completamente:

element.removeAttribute("required");

... che è l'equivalente di element.required = false.

Ma non dobbiamo farlo 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 evidenziare le proprietà riflesse , ho imparato che la seguente sintassi è sbagliata :

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

È necessario passare attraverso element.getAttributee element.setAttribute:

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

Questo perché l'attributo contiene effettivamente uno speciale oggetto 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", lo stai erroneamente impostando su un oggetto String , piuttosto che sull'oggetto 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 digitato), è:

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'oggetto HtmlAttribute all'interno.

Inoltre, vengono riflessi alcuni attributi . 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 è utilizzare erroneamente la .attributesraccolta:

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

Casi di test

Ciò ha portato a testare l'uso di un requiredattributo, 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")
==========================   ===============  =========================
<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)

Tentare di accedere .attributesdirettamente alla raccolta è sbagliato. Restituisce l'oggetto che rappresenta l'attributo DOM:

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

Questo spiega perché non dovresti mai parlare .attributesdirettamente con la raccolta. Non stai manipolando i valori degli attributi, ma gli oggetti che rappresentano gli attributi stessi.

Come impostare richiesto?

Qual è il modo corretto per impostare requiredun attributo? Hai due scelte, la proprietà riflessa o 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 degli Booleanattributi impone che dovrebbe essere impostato solo su una stringa vuota ""per indicare vero . I seguenti metodi funzionano tutti per impostare il valore required booleano attributo ,

ma non usarli:

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 l'attributo direttamente è 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 si tenta di rimuovere l' requiredattributo è che è facile attivarlo 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 usi la .requiredproprietà riflessa , puoi anche usare qualsiasi "falso" per disattivarla e valori true per attivarla. Ma attenersi a vero e falso per chiarezza.

Come controllare la per required?

Verificare la presenza dell'attributo tramite il .hasAttribute("required")metodo:

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

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

if (edName.required)
{
}

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

Puoi impostarlo usando

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

E la versione jquery:

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

So che è fuori discussione, ma forse qualcuno lo troverà utile :)

let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
  formelem.required = true;

});

Se desideri rendere necessari tutti gli elementi di input, textarea e select.

prova questo ..

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