Từ đọc this post Tôi đã tìm thấy rằng có một số lớp giả cho các giá trị đầu vào 'không hợp lệ' và 'không hợp lệ'.Tôi có thể đánh dấu một trường không hợp lệ từ javascript không?
Có cách nào tôi có thể đánh dấu trường nhập là không hợp lệ/hợp lệ từ javascript không? Hoặc cách khác, tôi có thể ghi đè phương thức xác thực được sử dụng không?
Có cách nào tôi có thể đánh dấu trường nhập là không hợp lệ/hợp lệ từ javascript không?
Thật không may, bạn không thể tạo kiểu lớp giả trong JavaScript, vì chúng không phải là phần tử thực, chúng không tồn tại trong DOM thực tế.
Với vani JavaScript bạn muốn sử dụng validation API.
Trong jQuery bạn chỉ có thể làm được điều này, http://jsfiddle.net/elclanrs/Kak6S/
if ($input.is(':invalid')) { ... }
Hoặc cách khác, tôi có thể ghi đè lên các phương pháp xác nhận sử dụng?
Nếu bạn đang sử dụng xác thực HTML5, sau đó dán vào đánh dấu. Nếu không, bạn có thể tắt xác thực HTML5 với $form.attr('novalidate', 'novalidate') và sử dụng JS để xác thực các trường của bạn và sau đó thêm các lớp valid hoặc invalid nếu cần. Tôi đã thực hiện a plugin hoạt động như thế này để hỗ trợ các trình duyệt không phải HTML5.
Bạn có ý gì khi không thể tạo kiểu cho chúng? Tôi đã làm nó rồi. 'input: invalid + label :: sau {content:" INVALID "; color: red;}' Thêm một đoạn văn bản INVALID màu đỏ sau nhãn mà tôi có bên cạnh trường nhập nếu trường này không hợp lệ (ví dụ: một trường email có một email không hợp lệ trong đó) – Svish
vâng trong css nhưng không phải trong js – elclanrs
"Có cách nào tôi có thể đánh dấu một trường đầu vào là không hợp lệ/hợp lệ từ javascript?" "Thật không may, bạn không thể tạo kiểu cho các lớp giả từ JavaScript" Đó không phải là câu hỏi được đặt ra. – mikemaccana
Chỉnh sửa: Ai đó đã làm rõ rằng bạn đang tìm kiếm thuộc tính "hợp lệ" "không hợp lệ" cho DOM.
Tôi sẽ thêm thuộc tính vào từng thẻ bằng cách sử dụng dom_object.setAttribute("isvalid", "true"). Bạn cũng có thể có một chức năng xác nhận trung tâm cập nhật các thuộc tính này mỗi lần (và sử dụng dom_object.getAttribute("isvalid") mỗi lần).
Bạn có thể chạy chức năng này mỗi khi yếu tố mất tiêu điểm hoặc bất cứ khi nào bạn muốn.
Không chính xác thanh lịch, nhưng tiếc là không có hỗ trợ "giả" với javascript và HTML5 ngay bây giờ.
Nếu tôi hiểu câu hỏi của bạn, bạn có thể xác thực bằng Javascript. Tuy nhiên, được cảnh báo rằng rất dễ dàng để vượt qua xác nhận phía khách hàng, đặc biệt là xác thực javascript. Bạn không bao giờ nên tin tưởng dữ liệu của khách hàng và luôn kiểm tra phía máy chủ. Ví dụ: tôi có thể dễ dàng tìm ID phần tử bằng cách kiểm tra mã nguồn, sau đó thực hiện document.getElementById('some_id').setAttribute('max', new_number) để thay đổi giá trị tối đa (đây là một trong các mục nhập từ liên kết của bạn).
Có nhiều cách khác nhau để làm điều đó, vì vậy tôi sẽ cố gắng cung cấp cho bạn thành ngữ chung.
Bạn có thể lấy giá trị bằng cách thực hiện document.getElementById('form_element_id').value (đảm bảo bạn cung cấp biểu mẫu name được gửi tới máy chủ và id được javascript sử dụng). Đối với văn bản, bạn có thể sử dụng .innerHTML.
Sau đó, bạn có giá trị trong một biến, có nhiều cách khác nhau để kiểm tra. Ví dụ: bạn có thể làm if (parseInt(my_value) < 0) //error. Bạn cũng có thể sử dụng cụm từ thông dụng, tôi sẽ không giải thích tất cả nhưng bạn có thể bắt đầu tại đây http://www.w3schools.com/jsref/jsref_obj_regexp.asp. Tôi biết w3schools không phải là nguồn tốt nhất nhưng tôi thấy nó là một nơi tốt để bắt đầu.
Bây giờ cho phần xác thực: thêm onsubmit="return validateForm() vào thẻ biểu mẫu của bạn trong đó validateForm() là hàm thực hiện tất cả việc kiểm tra. Và hàm chỉ trả về true nếu hợp lệ và false nếu không. Điều này ghi đè các chức năng xác nhận mặc định (mà theo mặc định không có gì).
Vì vậy, trong ví dụ trên, //error sẽ được thay thế bằng return false. Bạn cũng có thể làm những việc khác; chẳng hạn như cảnh báo lỗi sau đó trả về false. Bạn cũng có thể sử dụng javascript để đánh dấu các trường không hợp lệ (không chắc chắn nếu đây là ý của bạn bằng cách "đánh dấu trường nhập là không hợp lệ/hợp lệ từ javascript")
Tất nhiên, nếu bạn không muốn kiểm tra tất cả các trường bạn chỉ phải trả về true nếu một số trường nào đó vượt qua. Một lần nữa, bạn không nên dựa vào điều này, nhưng nếu bạn chỉ ra để ngăn chặn người trung bình thì đó là một giải pháp dễ dàng.
Bạn hoàn toàn chính xác, nhưng tôi không nghĩ rằng bạn đã hiểu được câu hỏi hoàn toàn. Trong HTML5, có nhiều cách khác nhau để thêm giá trị thuộc tính vào đánh dấu HTML ngụ ý các quy tắc xác thực được tích hợp sẵn. Khi trình duyệt áp dụng các quy tắc đó, trường nhập sẽ khớp với các lớp giả ": hợp lệ" hoặc ": không hợp lệ" trong CSS. Vì vậy, bạn có thể viết HTML với các thuộc tính đó và CSS có bộ chọn ": hợp lệ" và ": không hợp lệ" với các quy tắc và cung cấp phản hồi trực quan mà không cần bất kỳ JavaScript nào. Câu hỏi đặt ra là liệu trạng thái ": hợp lệ" có sẵn dưới dạng thuộc tính DOM hay không. – Pointy
Có, cảm ơn, điều đó có ý nghĩa hơn nhiều. – Raekye
Vâng, @Pointy là chính xác. Đã biết về phần còn lại;) – Svish
Bạn có thể sử dụng chức năng customValidity cho mục đích này.
Nếu bạn thêm thông báo tùy chỉnh vào trường, thông báo này sẽ không hợp lệ. Khi bạn đặt thư dưới dạng chuỗi trống, chuỗi đó sẽ trở thành hợp lệ lại (trừ khi nó không hợp lệ vì các lý do khác).
field.setCustomValidity("Invalid field."); sẽ làm cho trường này không hợp lệ.
field.setCustomValidity(""); sẽ làm cho trường hợp lệ trừ khi nó không bị ràng buộc HTML5.
Chính xác những gì tôi cần, cảm ơn! – Andreas
Tuyệt vời. Cảm ơn bạn. Đã thêm vào http://codepen.io/kevinSuttle/post/the-current-state-of-web-forms –
Bạn luôn có thể tăng gấp đôi với một lớp "không hợp lệ", nhưng thật sự thú vị khi biết rằng có cách tốt hơn. – Pointy
Vâng, tất nhiên, nhưng điều đó sẽ nhàm chán;) – Svish