Check if a browser has built-in HTML5 form validation?

Question

How to check if a browser has built-in HTML5 form validation ability? By doing so, we don't need to apply jQuery form validation functions on browsers who can validate form by themselves.

[Solved] Based on ThinkingStiff's answer, here is a way:

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

Answer 1

Simply check if the checkValidity() function exists:

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

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

Call it like this:

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

Answer 2

You can do this using Modernizr javascript http://www.modernizr.com/ . You can take help from this post html5 form validation modernizr safari . You can also take advantage of modernizr load

The basic syntax for Modernizr.load() is to pass it an object with the following properties:

• test: The Modernizr property you want to detect.
• yep: The location of the script you want to load if the test succeeds. Use an array for multiple scripts.
• nope: The location of the script you want to load if the test fails. Use an array for multiple scripts.
• complete: A function to be run as soon as the external script has been loaded (optional).

Both yep and nope are optional, as long as you supply one of them.

To load and execute the script in check_required.js, add the following block after modernizr.adc.js has been attached to the page (the code is in required_load.html):

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

Source : http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html