jQuery thêm yêu cầu vào các trường đầu vào


171

Tôi đã tìm kiếm các cách để jQuery tự động viết yêu cầu bằng cách sử dụng xác thực html5 cho tất cả các trường đầu vào của tôi nhưng tôi gặp khó khăn khi nói nó nên viết nó ở đâu.

Tôi muốn lấy cái này

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150">

và tự động thêm yêu cầu trước thẻ đóng

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150" required>

Tôi nghĩ rằng tôi có thể làm gì đó dọc theo dòng

$("input").attr("required", "true");

Nhưng nó không hoạt động. Bất kỳ trợ giúp nào cũng được đánh giá rất cao.


2
Là nó không được bọc trong dom sẵn sàng? $(function(){....});
PSL


nếu 'input' là id thì jquery bị thiếu # trong bộ chọn ở đây.
John Meyer

@JohnMeyer "đầu vào" là một bộ chọn thẻ. Không cần # nếu nhắm mục tiêu thẻ đầu vào
Spartacus

Câu trả lời:


419
$("input").prop('required',true);

DEMO FIDDLE


1
Hmm, đã thêm nút gửi nhưng vẫn không xác thực hoặc thêm thuộc tính bắt buộc vào các trường đầu vào. jsfiddle.net/japanesel Languagefriend/LEZ4r
Miura-shi

1
@JohnMeyer "đầu vào" là một công cụ chọn thẻ
morefromalan

1
gặp TypeError: element.prop is not a functionlỗi
davideghz

@ Miura-shi Bạn đang thiếu các <form></form>thẻ trong jsFiddle của bạn
JESTech

Nếu nó có thể giúp ai đó: điều này ban đầu không hiệu quả với tôi vì tôi đã gọi .prop('required',true)vào đầu vào trước khi gọi .css("display", "block")nó.
electrotype

52

Bạn có thể làm điều đó bằng cách sử dụng attr, sai lầm mà bạn đã làm là bạn đặt dấu ngoặc kép bên trong. thay vì thử điều này:

$("input").attr("required", true);

2
@JohnMeyer "input" là tên của bộ chọn thẻ
dave4jr

requiredlà một thuộc tính boolean và chỉ nên bỏ qua (cho "false") hoặc có cùng giá trị với tên của nó (tức là "required") cho "true". Nó thực sự tốt hơn để sử dụng .prop().
Alnitak

@Alnitak Không phải nếu bạn đang làm cho một trang web tương thích với IE, prop()thì nó không hoạt động trên đó như trên các trình duyệt hiện đại. Vẫn tốt nhất để sử dụng $(ele).attr("required", true)falseloại bỏ.
Oliver Heward

29

Tôi đã thấy rằng các triển khai sau đây có hiệu quả:

$('#freeform_first_name').removeAttr('required');

$('#freeform_first_name').attr('required', 'required');

Các lệnh này (attr, removeAttr, prop) hoạt động khác nhau tùy thuộc vào phiên bản JQuery bạn đang sử dụng. Vui lòng tham khảo tài liệu ở đây: https://api.jquery.com/attr/


6

Sử dụng .attrphương pháp

.attr(attribute,value); // syntax

.attr("required", true);
// required="required"

.attr("required", false);
// 

Sử dụng .prop

.prop(property,value) // syntax

.prop("required", true);
// required=""

.prop("required", false);
//

Đọc thêm từ đây

https://stackoverflow.com/a/5876747/5413283


4

Tôi thấy rằng jquery 1.11.1 không làm điều này một cách đáng tin cậy.

Tôi đã sử dụng $('#estimate').attr('required', true)$('#estimate').removeAttr('required').

Loại bỏ requiredlà không đáng tin cậy. Nó đôi khi sẽ để lại requiredthuộc tính mà không có giá trị. Vì requiredlà một tính năng boolean, sự hiện diện đơn thuần của nó, không có giá trị, được trình duyệt xem làtrue .

Lỗi này không liên tục và tôi cảm thấy mệt mỏi vì phải làm phiền nó. Chuyển sang document.getElementById("estimate").required = truedocument.getElementById("estimate").required = false.


removeAttrkhông làm việc với tôi. Sau đó, tôi sử dụng giải pháp của bạn và hoạt động tốt. Cảm ơn!
Diego Somar

4

Không nên kèm theo đúng với trích dẫn kép "" nó sẽ giống như

$(document).ready(function() {            
   $('input').attr('required', true);   
});

Ngoài ra, bạn có thể sử dụng prop

jQuery(document).ready(function() {            
   $('input').prop('required', true);   
}); 

Thay vì đúng bạn có thể thử yêu cầu. Nhu la

$('input').prop('required', 'required');
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.