Kiểm tra xem trình duyệt có xác thực biểu mẫu HTML5 được tích hợp không?

Question

Cách kiểm tra xem trình duyệt có khả năng xác thực biểu mẫu HTML5 được tích hợp không? Bằng cách đó, chúng ta không cần phải áp dụng các hàm xác nhận biểu mẫu jQuery trên các trình duyệt có thể tự xác thực biểu mẫu.

[Solved] Dựa trên câu trả lời của ThinkingStiff, đây là một cách:

if (typeof document.createElement("input").checkValidity == "function") { 
    alert("Your browser has built-in form validation!"); 
} 

Answer 1

Đơn giản chỉ cần kiểm tra xem checkValidity() chức năng tồn tại:

Demo: http://jsfiddle.net/ThinkingStiff/cmSJw/

function hasFormValidation() { 

    return (typeof document.createElement('input').checkValidity == 'function'); 

}; 

Gọi nó như thế này:

if(hasFormValidation()) { 
    //HTML5 Form Validation supported 
}; 

Answer 2

Bạn có thể làm điều này bằng Modernizr javascript http://www.modernizr.com/. Bạn có thể nhận trợ giúp từ bài đăng này html5 form validation modernizr safari. Bạn cũng có thể tận dụng lợi thế của tải Modernizr

Cú pháp cơ bản cho Modernizr.load() là để vượt qua nó một đối tượng với các thuộc tính sau:

• kiểm tra: Thuộc tính Modernizr bạn muốn phát hiện.
• yep: Vị trí của tập lệnh bạn muốn tải nếu thử nghiệm thành công. Sử dụng một mảng cho nhiều tập lệnh.
• nope: Vị trí của tập lệnh bạn muốn tải nếu thử nghiệm không thành công. Sử dụng một mảng cho nhiều tập lệnh.
• hoàn thành: Một hàm sẽ chạy ngay sau khi tập lệnh bên ngoài được tải (tùy chọn).

Cả hai yep và nope là tùy chọn, miễn là bạn cung cấp một trong số chúng.

Để tải và thực thi kịch bản trong check_required.js, thêm khối sau đây sau khi modernizr.adc.js đã được gắn liền với trang (mã là trong required_load.html):

<script> 
    Modernizr.load({ 
    test: Modernizr.input.required, 
    nope: 'js/check_required.js', 
    complete: function() { 
     init(); 
    } 
    }); 
</script> 

Nguồn: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

Answer 3

Làm thế nào về

function hasFormValidation() { 
    return 'noValidate' in document.createElement('form'); 
} 

Nguồn: http://diveintohtml5.info/everything.html#novalidate

Answer 4

Có một vấn đề với nhà hàng hải như một Android (phiên bản trước 4,4), mà thực hiện checkValidity (và chức năng này trên thực tế kiểm tra đầu vào) nhưng trình duyệt không cung cấp bất kỳ thông tin nào cho người dùng (và gửi biểu mẫu) nếu một số đầu vào không hợp lệ.

Tuy nhiên, bạn có thể kiểm tra xem có sự cố nào không khi sử dụng validationMessage. Thuộc tính này cho bạn thấy thông báo lỗi mà trình duyệt sẽ hiển thị cho người dùng. Nếu checkValidity() là sai nhưng không có validationMessage trình duyệt không có hỗ trợ xác thực biểu mẫu html5 đầy đủ.

Tôi đã thực hiện chức năng này.Nó đòi hỏi như các đối số tất cả các lĩnh vực trong các hình thức:

canValidateFields() {  
    var result = typeof document.createElement('input').checkValidity == 'function'; 
    if (result) { 
     for (var i = 0; i < arguments.length; i++) { 
      var element = document.getElementById(arguments[i]); 
      if (!element.checkValidity() && (!element.validationMessage || element.validationMessage === null || element.validationMessage === '')) { 
       return false; 
      } 
     } 
    } 
    return result; 
} 

mẫu: http://jsfiddle.net/pmnanez/ERf9t/2/

Answer 5

Các xét nghiệm sau đây không làm việc cho Safari:

'noValidate' in document.createElement('form')

và

typeof document.createElement('input').checkValidity == 'function'

Họ báo cáo true khi dự kiến ​​false vì Safari không báo cáo các trường không hợp lệ.

Tuy nhiên, thử nghiệm này hoạt động:

'reportValidity' in document.createElement('form')

(chưa được thử nghiệm trên IE hoặc Android)

EDIT: Safari không xác nhận, nhưng không báo cáo, điều này giải thích những câu trả lời các xét nghiệm này. Các trường không hợp lệ có thể được phát hiện thông qua lớp CSS :invalid giả. Một sự kết hợp của các xét nghiệm này có thể được sử dụng để xác nhận nơi trình duyệt không hỗ trợ xác nhận và báo cáo nơi trình duyệt không báo cáo.