檢查瀏覽器是否內置了HTML5表單驗證？

Question

如何檢查瀏覽器是否內置了HTML5表單驗證功能？通過這樣做，我們不需要在可以自行驗證表單的瀏覽器上應用jQuery表單驗證功能。

[解決] 基於ThinkingStiff的答案，這裏是一個辦法：

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

Answer 1

簡單的檢查checkValidity()函數存在：

演示：http://jsfiddle.net/ThinkingStiff/cmSJw/

function hasFormValidation() { 

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

}; 

這樣稱呼它：

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

Answer 2

爲此，您可以使用JavaScript的Modernizr的http://www.modernizr.com/。你可以從這個職位html5 form validation modernizr safari獲得幫助。您還可以採取Modernizr的負載

爲Modernizr.load的基本語法（）的優點是具有以下屬性傳遞一個對象：

• 測試：你要檢測的Modernizr的財產。
• 是：如果測試成功，您想要加載的腳本的位置。爲多個腳本使用數組。
• nope：如果測試失敗，您要加載的腳本的位置。爲多個腳本使用數組。
• complete：外部腳本加載完成後即可運行的函數（可選）。

只要您提供其中一個，yep和nope都是可選的。

要加載並在check_required.js執行該腳本中，添加以下塊modernizr.adc.js已經連接到網頁後（該代碼是在required_load.html）：

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

來源： http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

Answer 3

如何

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

來源：http://diveintohtml5.info/everything.html#novalidate

Answer 4

沒有與像Android的一個（以前版本4.4），導航儀一個問題，實現了checkValidity（並且該函數實際上檢查輸入），但是如果某些輸入無效，則瀏覽器不向用戶提供任何信息（併發送表單）。

但是，您可以使用validationMessage檢查是否有任何問題。該屬性向您顯示瀏覽器向用戶顯示的錯誤消息。如果checkValidity()是錯誤的，但沒有validationMessage瀏覽器沒有完整的html5表單驗證支持。

我已經做了這個功能。它需要作爲參數表格中的所有字段：

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; 
} 

樣品：http://jsfiddle.net/pmnanez/ERf9t/2/

Answer 5

下面的測試沒有Safari的工作：

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

和

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

他們報告true當false預計，因爲Safari不報告無效字段。

然而，該測試成功：

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

（不是IE或Android測試）

編輯： Safari瀏覽器也驗證，但不報告，這解釋了對策這些測試。無效字段可以通過CSS :invalid僞類發現。這些測試的組合可用於驗證瀏覽器不支持驗證的位置，並報告瀏覽器不報告的位置。