Làm cách nào để hiển thị các bong bóng lỗi xác thực phía máy khách HTML5 theo chương trình?

Question

Tôi đang cố gắng sử dụng xác thực phía máy khách HTML5 bên ngoài ngữ cảnh biểu mẫu/gửi, nhưng không thể xem cách hiển thị bong bóng lỗi xác thực. Hãy xem xét những điều sau đây:

<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes, invalid')"> 
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button> 

Tất cả mọi thứ hoạt động như mong đợi, với giá trị chính xác được trả lại từ checkValidity, và sự kiện không hợp lệ được gửi và hiển thị, nhưng làm thế nào để lập trình hiển thị bong bóng lỗi xác nhận?

Answer 1

Nếu bạn đang nói về bong bóng này: Cảm nhận

Xem ScottR của câu trả lời này để thay thế.

... sau đó thử nghiệm của tôi cho thấy rằng cả hai trình duyệt Firefox và Chrome hiển thị nó khi gọi checkValidity trên một yếu tố được bọc trong một < form> ( testcase), nhưng không phải trên một yếu tố độc lập ( testcase).

Có vẻ như không phải là cơ chế hiển thị khi không có biểu mẫu và thông số doesn't even say phải được hiển thị theo yêu cầu checkValidity có lập trình (trên phần tử hoặc biểu mẫu) - chỉ khi gửi hình thức.

Vì vậy, bây giờ, bao bọc các phần tử của bạn dưới dạng, ngay cả khi bạn sẽ không thực sự gửi nó.

Tốt hơn, hãy sử dụng giao diện người dùng xác thực của riêng bạn, điều này sẽ bảo vệ bạn khỏi những thay đổi trong tương lai trong các trình duyệt trong khu vực chưa được xác định này.

Answer 2

Hãy thử sử dụng required="required" và loại bỏ trình xử lý oninvalid trừ khi bạn thực sự cần nó.

http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/

Ví dụ về làm việc này: https://support.mozilla.com/en-US/users/register

Answer 3

Chỉ cần đặt thuộc tính "không hợp lệ" theo cách thủ công thành các trường không chính xác. Ví dụ nhỏ:

var form = $('#myForm').get(0); 
if(typeof formItem.checkValidity != 'undefined' && !formItem.checkValidity()) { 
    $('input:required').each(function(cnt, item) { 
     if(!$(item).val()) { 
      $(item).attr('invalid', 'invalid'); 
     } 
    }); 
    return false; 
}