Cum setați atributul HTML5 required în Javascript? (Programare, Javascript, Html, Validare)

Ian Boyd a intrebat.

Încerc să marchez un element text caseta de intrare ca fiind obligatorie în Javascript.

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

În cazul în care câmpul este marcat inițial ca required:

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

atunci când utilizatorul încearcă să trimită, acesta primește o eroare de validare:

Dar acum vreau să setez câmpul required la „runtime”, , prin Javascript:

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

cu scriptul corespunzător:

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

Numai că atunci când trimit acum, nu există nici o verificare de validare, nici un bloc.

Care este corect modul corect de a seta un atribut boolean de validare HTML5?

jsFiddle

Care este valoarea atributului, vă întrebați?

Validarea HTML5 required este documentată ca o Boolean:

4.10.7.3.3.4 The required atribut

required este un atribut atribut boolean. Atunci când este specificat, elementul este obligatoriu.

Există o mulțime de discuții cu privire la modul de definire a unui element boolean atribut. În specificațiile HTML5 se menționează:

Prezența unui atribut boolean pe un element reprezintă valoarea adevărată, iar absența atributului reprezintă valoarea falsă.

În cazul în care atributul este prezent, valoarea sa trebuie să fie un șir gol sau o valoare care să corespundă, fără deosebire de majuscule și minuscule, la numele canonic al atributului, fără spații albe la început sau la sfârșit.

Aceasta înseamnă că puteți specifica o valoare required boolean în două moduri diferite:

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

Dar care este valoarea atributului într-adevăr?

Când vă uitați la jsFiddle a acestei probleme, veți observa că dacă atributul required este definit în markup:

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

Apoi, valoarea atributului este nu șirul gol, nici numele canonic al atributului:

edName.attributes.required = [object Attr]

Acest lucru ar putea duce la o soluție.

Comentarii

  • Nu înțeleg de ce nu se permite required="false", , au scris vreodată un șablon înainte de a scrie standardul? Atributele condiționate sunt de obicei o pacoste, este mult mai simplu să pui acel boolean în valoarea atributului… –  > Por Christophe Roussy.
  • Este posibil să se afișeze manual acel text peste intrarea obligatorie: „Vă rugăm să completați acest câmp.”? –  > Por zygimantus.
6 răspunsuri
T.J. Crowder

required este un proprietate reflectată (cum ar fi id, , name, , type, , și altele asemenea), deci:

element.required = true;

…unde element este valoarea reală input DOM, de exemplu:

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

(Doar pentru a fi complet.)

Re:

Atunci valoarea atributului nu este șirul gol și nici numele canonic al atributului:

edName.attributes.required = [object Attr]

Asta deoarece required în acel cod este un obiect atribut, , nu un șir de caractere; attributes este un NamedNodeMap ale cărui valori sunt Attr obiecte. Pentru a obține valoarea unuia dintre ele, trebuie să vă uitați la obiectul său value proprietate. Dar pentru un atribut boolean, valoarea nu este relevantă; atributul este fie prezent în hartă (true), fie nu este prezent (false).

Așadar, dacă required nu erau reflectată, ați seta-o prin adăugarea atributului:

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

…care este echivalentul lui element.required = true. L-ați șterge eliminându-l complet:

element.removeAttribute("required");

…care este echivalentul lui element.required = false.

Dar nu trebuie să facem acest lucru cu required, , deoarece este reflectat.

Comentarii

  • Poți adăuga ceva despre .prop aici? –  > Por mplungjan.
  • @mplungjan – Nu sunt sigur ce vrei să spui…? jQuery? –  > Por T.J. Crowder.
  • Da, pentru că este confuz faptul că prod nu funcționează în DOM –  > Por mplungjan.
Ian Boyd

Versiunea scurtă

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

Versiunea lungă

Odată ce T.J. Crowder a reușit să sublinieze proprietățile reflectate, , am aflat că următoarea sintaxă este greșită:

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

Tu trebuie să treceți prin element.getAttribute și element.setAttribute:

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

Acest lucru se datorează faptului că atributul conține de fapt un caracter special HtmlAttribute special:

element.attributes["foo"];           //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo;              //returns HtmlAttribute object, not the value of the attribute

Dacă setați valoarea unui atribut la „true”, îl setați din greșeală la un obiect de tip String în loc de un obiect HtmlAttribute pe care îl necesită:

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

Conceptual, ideea corectă (exprimată într-un limbaj tipizat) este:

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

Iată de ce:

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

există. Acestea fac munca de atribuire a valorii obiectului HtmlAttribute în interiorul său.

Pe lângă aceasta, unele atribute sunt reflectate. Acest lucru înseamnă că le puteți accesa mai ușor din 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 trebuie să faceți nu doriți să faceți este să folosiți din greșeală .attributes colecția:

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

Cazuri de testare

Acest lucru a dus la testarea în jurul utilizării unei colecții required și compararea valorilor returnate prin intermediul atributului și a proprietății reflectate.

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

cu rezultatele:

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)

Încercarea de a accesa proprietatea .attributes direct la colecție este greșit. Se returnează obiectul care reprezintă atributul DOM:

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

Acest lucru explică de ce nu trebuie să vorbiți niciodată cu .attributes colecția direct. Nu manipulați valorile ale atributelor, ci obiectele care reprezintă atributele în sine.

Cum se stabilește necesarul?

Care este modalitatea corectă de a seta required pe un atribut? Aveți două opțiuni, fie metoda reflectată proprietatea, , fie prin setarea corectă a atributului:

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

Strict vorbind, orice altă valoare va „seta” atributul. Dar definiția lui Boolean atributelor dictează că acesta trebuie să fie setat doar la șirul gol "" pentru a indica adevărat. Următoarele metode funcționează toate pentru setează required Boolean ,

dar nu utilizați acestea:

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

Am învățat deja că încercarea de a seta atributul direct este greșită:

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

Cum să ștergeți necesar?

Șmecheria atunci când încercați să eliminați required este că este ușor să îl activați din greșeală:

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

Cu căile 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!

Atunci când se utilizează sistemul de reflexie .required puteți utiliza, de asemenea, orice proprietate „falsey” pentru a o dezactiva, iar valorile veridice pentru a o activa. Dar, pentru mai multă claritate, folosiți doar true și false.

Cum să verificați pentru required?

Verificați prezența atributului prin intermediul funcției .hasAttribute("required") metoda :

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

Puteți verifica, de asemenea, prin metoda Boolean reflectat .required :

if (edName.required)
{
}

Comentarii

  • Care este diferența dintre variabilele element și edName? –  > Por semnale de leșin.
  • Unul este cel în care am uitat să convertesc numele elementului specific edName (de exemplu, caseta de introducere a numelui) în genericul element. –  > Por Ian Boyd.
  • „Tu trebuie să să treci prin element.getAttribute și element.setAttribute:” Doar pentru claritate, puteți folosi attributes NamedNodeMap pentru a schimba valoarea unui atribut dacă știți că acesta există deja, dar nu îl puteți folosi pentru a adăuga un atribut care nu există (sau pentru a elimina unul care există). Prin urmare, această abordare nu este utilă pentru atributele booleene precum required deoarece ceea ce contează în cazul acestora este dacă există, nu care este valoarea lor. Dar da, proprietățile reflectate sunt de obicei mai ușoare. 🙂 –  > Por T.J. Crowder.
Denys Séguret

Ceea ce contează nu este atributul, ci valoarea proprietatea, , iar valoarea acesteia este un boolean.

O puteți seta folosind

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

vladCovaliov

Și versiunea jquery:

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

Știu că este dincolo de întrebare, dar poate cineva va găsi asta util 🙂

Comentarii

  • de fapt, folosiți prop() în loc de attr() 🙂 –  > Por Poul Kruijt.
  • @PierreDuc Suntem în 2019 .. nu mai folosim 🙂 –  > Por a20.
  • @a20 ultima dată când am verificat, încă îl folosesc. Deci, cred că te înșeli –  > Por Poul Kruijt.
  • Am glumit fratele meu … îmi pare rău! –  > Por a20.
Kyle Pennell
let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
  formelem.required = true;

});

Dacă doriți să faceți ca toate elementele de intrare, textarea și selectarea să fie obligatorii.

Vijay

încercați acest lucru…

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