Bagaimana untuk menetapkan atribut yang diperlukan HTML5 menggunakan Javascript?

Question

Saya cuba menandakan text kotak input sebagai diperlukan dalam Javascript.

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

Jika medan asalnya ditanda required:

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

Apabila pengguna cuba menyerahkan, mereka menerima ralat pengesahan:

Tetapi sekarang saya mahu menetapkan sifat required pada "runtime" melalui Javascript:

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

Gunakan skrip yang sepadan:

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

Tiada semakan pengesahan, tiada sekatan melainkan saya menyerahkan sekarang.

Apakah cara yang betul untuk menyediakan Atribut Boolean pengesahan HTML5 ?

jsFiddle

Apakah nilai atribut ini, anda bertanya?

Pengesahan HTML5 required 属性记录为 Boolean Atribut didokumenkan sebagai Boolean:

4.10.7.3.4 required Hartanah

Harta

required ialah harta Boolean. Apabila dinyatakan, elemen ini diperlukan.

Terdapat banyak perkara yang menjengkelkan tentang cara menentukan boolean sifat. Ulasan spesifikasi HTML5:

Kehadiran atribut Boolean pada elemen

mewakili nilai sebenar, dan ketiadaan atribut ini mewakili nilai palsu.

Jika atribut ada, nilainya mestilah rentetan kosong atau nilai tidak peka huruf besar ASCII yang sepadan dengan nama kanonik atribut dan tidak mempunyai ruang di hadapan atau di belakang.

Ini bermakna anda boleh menentukan sifat required boolean dalam dua cara berbeza:

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

Tetapi apakah nilai sifat sebenarnya ?

Apabila anda melihat jsFiddle saya untuk soalan ini, anda akan perasan bahawa jika atribut required ditakrifkan dalam markup:

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

Maka nilai atribut bukanlah rentetan kosong, dan juga bukan nama kanonik atribut:

edName.attributes.required = [object Attr]

Ini mungkin membawa kepada penyelesaian.

Answer 1

required 是一个反射属性 （例如 id、name、type dll.), oleh itu:

element.required = true;

...di mana element 是实际的 input elemen DOM, contohnya:

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

---

(Hanya untuk kesempurnaan.)

Balas:

Itu kerana atribut required 是一个属性对象，而不是字符串； 属性是< code>NamedNodeMap 其值为 Attr对象。要获取其中之一的值，您需要查看其 value dalam kod itu. Tetapi untuk sifat boolean, nilainya adalah tidak relevan;

Jadi jika required tidak dicerminkan, anda boleh menetapkannya dengan menambah sifat:

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

...bersamaan dengan element.required = true. Anda boleh mengosongkannya dengan memadamkannya sepenuhnya:

element.removeAttribute("required");

...bersamaan dengan element.required = false.

Tetapi kita tidak perlu berbuat demikian untuk required kerana ia sudah dicerminkan.

Answer 2

Versi pendek

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

Versi panjang

Setelah T.J. Crowder berjaya menunjukkan sifat tercermin, saya mempelajari sintaks berikut ralat:

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

Anda mesti lulus element.getAttribute和element.setAttribute:

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

Ini kerana atribut itu sebenarnya mengandungi objek HtmlAttribute khas:

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

Dengan menetapkan nilai atribut kepada "true" anda tersilap menetapkannya kepada objek String dan bukannya objek HtmlAttribute yang diperlukan:

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

Secara konsep, idea yang betul (dinyatakan dalam bahasa jenis) ialah:

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

Ini sebabnya:

• getAttribute(名称)
• setAttribute(名称, 值)

Kewujudan. Mereka bertanggungjawab untuk memberikan nilai kepada objek HtmlAttribute dalaman.

Selain itu, ia juga mencerminkan beberapa sifat. Ini bermakna anda mempunyai akses yang lebih baik kepada mereka melalui 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;

Apa yang anda tidak mahu lakukan ialah menggunakan .attributeskoleksi secara salah:

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

Kes Ujian

Ini membawa kepada ujian di sekitar penggunaan atribut required, membandingkan nilai yang dikembalikan melalui atribut itu dengan atribut yang dicerminkan

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

Hasil:

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)

Percubaan untuk mengakses koleksi .attributes secara langsung adalah satu ralat. Ia mengembalikan objek yang mewakili sifat DOM:

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

Ini menerangkan sebab anda tidak boleh bercakap terus dengan koleksi .attributes. Anda tidak memanipulasi nilai harta itu, tetapi objek yang mewakili harta itu sendiri.

Bagaimana untuk menetapkan medan yang diperlukan?

Apakah cara yang betul untuk menetapkan required pada hartanah? Anda mempunyai dua pilihan, sama ada sifat tercermin atau dengan menetapkan sifat dengan betul:

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

Tegasnya, sebarang nilai lain "menetapkan" harta itu. Walau bagaimanapun, takrifan atribut Boolean menyatakan bahawa ia hanya boleh ditetapkan kepada rentetan kosong "" untuk menunjukkan Boolean 属性的定义规定，只能将其设置为空字符串 "" 来指示 true。以下方法都可以设置requiredtrue. Kaedah berikut boleh menetapkan

Boolean atribut,

Tetapi

jangan gunakan

mereka:

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

Kami telah mengetahui bahawa cuba menetapkan sifat secara langsung adalah satu kesilapan:

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

Bagaimana untuk kosongkan medan yang diperlukan? required

Tipunya apabila mencuba

mengalih

harta adalah mudah untuk membukanya secara tidak sengaja: .required

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

Kaedah tidak sah:

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!

Apabila menggunakan sifat refleksi, anda juga boleh menggunakan sebarang nilai "palsu" untuk mematikannya dan menggunakan nilai sebenar untuk menghidupkannya. Tetapi demi kejelasan, berpegang pada betul dan salah. 必需

Bagaimana

semak .hasAttribute("required") jika ada

?

Semak sama ada harta itu wujud melalui kaedah : .required

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

Anda juga boleh menyemak melalui 🎜Boolean🎜 tercermin 🎜 sifat: 🎜

if (edName.required)
{
}