Tôi đang cố gắng đánh dấu một texthộp nhập theo yêu cầu trong Javascript.

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

Nếu ban đầu trường được đánh dấu là required:

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

khi người dùng cố gắng gửi họ sẽ gặp lỗi xác thực:

Nhưng bây giờ tôi muốn đặt requiredthuộc tính ở "thời gian chạy" , thông qua Javascript:

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

với tập lệnh tương ứng:

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

Ngoại trừ khi tôi gửi bây giờ, không có kiểm tra xác thực, không có khối.

Là gì đúng cách để thiết lập một boolean thuộc tính validation HTML5 ?

jsFiddle

Bạn hỏi giá trị của thuộc tính là gì?

requiredThuộc tính xác thực HTML5 được ghi lại dưới dạng Boolean:

4.10.7.3.4 requiredThuộc tính

Các requiredthuộc tính là một thuộc tính boolean . Khi được chỉ định, phần tử là bắt buộc.

Có rất nhiều vấn đề về cách xác định một booleanthuộc tính. Thông số kỹ thuật HTML5 ghi chú:

Sự hiện diện của thuộc tính boolean trên một phần tử biểu thị giá trị true và sự vắng mặt của thuộc tính biểu thị giá trị sai.

Nếu thuộc tính có mặt, giá trị của nó phải là chuỗi trống hoặc giá trị là một đối sánh không phân biệt chữ hoa chữ thường ASCII cho tên chuẩn của thuộc tính, không có khoảng trắng ở đầu hoặc cuối.

Điều này có nghĩa là bạn có thể chỉ định thuộc tính required boolean theo hai cách khác nhau:

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

Nhưng giá trị của thuộc tính thực sự là gì?

Khi bạn xem jsFiddle của tôi về vấn đề này , bạn sẽ nhận thấy rằng nếu requiredthuộc tính được xác định trong đánh dấu:

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

Sau đó, giá trị của thuộc tính không phải là chuỗi trống, cũng không phải là tên chuẩn của thuộc tính:

edName.attributes.required = [object Attr]

Điều đó có thể dẫn đến một giải pháp.

requiredlà một tài sản phản ánh (như id, name, type, và như vậy), vì vậy:

element.required = true;

... phần tử DOM elementthực ở đâu input, ví dụ:

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

(Chỉ cho sự hoàn chỉnh.)

Re:

Sau đó, giá trị của thuộc tính không phải là chuỗi trống, cũng không phải là tên chuẩn của thuộc tính:

edName.attributes.required = [object Attr]

Đó là bởi vì requiredtrong mã đó là một đối tượng thuộc tính , không phải là một chuỗi; attributeslà một NamedNodeMapcó giá trị là Attrđối tượng . Để có được giá trị của một trong số chúng, bạn sẽ nhìn vào thuộc tính của nó value. Nhưng đối với thuộc tính boolean, giá trị không liên quan; thuộc tính có trong bản đồ (đúng) hoặc không có (sai).

Vì vậy, nếu required không được phản ánh, bạn sẽ đặt nó bằng cách thêm thuộc tính:

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

... tương đương với element.required = true. Bạn sẽ xóa nó bằng cách xóa hoàn toàn:

element.removeAttribute("required");

... tương đương với element.required = false.

Nhưng chúng ta không cần phải làm điều đó required, vì nó đã được phản ánh.

Phiên bản ngắn

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

Phiên bản dài

Khi TJ Crowder quản lý để chỉ ra các thuộc tính được phản ánh , tôi đã biết rằng cú pháp sau là sai :

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

Bạn phải trải qua element.getAttributevà element.setAttribute:

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

Điều này là do thuộc tính thực sự chứa một đối tượng HtmlAttribute đặc biệt :

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

Bằng cách đặt giá trị thuộc tính thành "true", bạn đang đặt nhầm giá trị đó thành đối tượng Chuỗi , chứ không phải đối tượng HtmlAttribute mà nó yêu cầu:

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

Về mặt khái niệm, ý đúng (diễn đạt bằng ngôn ngữ được đánh máy), là:

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

Đây là lý do tại sao:

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

hiện hữu. Họ thực hiện công việc gán giá trị cho đối tượng HtmlAttribute bên trong.

Trên hết, một số thuộc tính được phản ánh . Điều này có nghĩa là bạn có thể truy cập chúng độc đáo hơn từ 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;

Điều bạn không muốn làm là sử dụng nhầm .attributesbộ sưu tập:

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

Trường hợp thử nghiệm

Điều này dẫn đến thử nghiệm xung quanh việc sử dụng requiredthuộc tính, so sánh các giá trị được trả về thông qua thuộc tính và thuộc tính được phản ánh

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

với kết quả:

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)

Cố gắng truy cập .attributestrực tiếp vào bộ sưu tập là sai. Nó trả về đối tượng đại diện cho thuộc tính DOM:

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

Điều này giải thích tại sao bạn không bao giờ nên nói chuyện .attributestrực tiếp với bộ sưu tập. Bạn không thao tác các giá trị của các thuộc tính mà là các đối tượng đại diện cho chính các thuộc tính đó.

Làm thế nào để thiết lập yêu cầu?

Cách chính xác để đặt requiredthuộc tính là gì? Bạn có hai lựa chọn, hoặc là phản ánh tài sản , hoặc thông qua thiết lập một cách chính xác các thuộc tính:

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

Nói một cách chính xác, bất kỳ giá trị nào khác sẽ "thiết lập" thuộc tính. Nhưng định nghĩa của các Booleanthuộc tính chỉ ra rằng nó chỉ nên được đặt thành chuỗi trống ""để biểu thị true . Các phương pháp sau tất cả công việc để thiết lập các required Boolean thuộc tính,

nhưng không sử dụng chúng:

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

Chúng tôi đã biết rằng việc cố gắng đặt thuộc tính trực tiếp là sai:

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

Làm thế nào để xóa yêu cầu?

Bí quyết khi cố gắng loại bỏ các requiredthuộc tính là rất dễ dàng để vô tình bật tính năng này:

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

Với những cách không hợp lệ:

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!

Khi sử dụng thuộc tính được phản ánh .required, bạn cũng có thể sử dụng bất kỳ giá trị "falsey" nào để tắt nó và giá trị true để bật nó. Nhưng chỉ cần bám vào true và false cho rõ ràng.

Làm thế nào để kiểm tra cho required?

Kiểm tra sự hiện diện của thuộc tính thông qua .hasAttribute("required")phương pháp:

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

Bạn cũng có thể kiểm tra nó thông qua thuộc tính Boolean được phản ánh .required:

if (edName.required)
{
}

Điều quan trọng không phải là thuộc tính nhưng tài sản , và giá trị của nó là một boolean.

Bạn có thể đặt nó bằng cách sử dụng

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

Và phiên bản jquery:

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

Tôi biết nó nằm ngoài câu hỏi, nhưng có lẽ ai đó sẽ thấy điều này hữu ích :)

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

});

Nếu bạn muốn thực hiện tất cả các phần tử đầu vào, vùng văn bản và lựa chọn bắt buộc.

thử cái này ..

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