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

Question

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

Gilboa

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

Interest

Thank you. This method looks succinct. I tested it on my local server, and IE6/7/8/9 seem to be unable to run it. Is a workaround available? – Gilboa

I got it. It's because IE6/7/8/9 can't play well with textContent. – Gilboa

Safari and several mobile webkit browsers (including the default Android browser in versions prior to 3.0) have implementations of the checkValidity method. However the browser provides absolutely no feedback to the user when the form is invalid and lets the form be submitted. This makes the checkValidity method unreliable for testing if the constraint validation api is supported by the browser. – Faris

Isn't HTMLFormElement.prototype.checkValidity a cleaner way to check existance? – Bub

@Bub Wouldn't this throw an exception if it didn't exist (like in an older browser) and you called it? – Interest

@Interest Not sure of this, but its part of Dom spec 2[1] and hence available everywhere. Its a constructor so there is always a HTMLFormElement.prototype available. So checkValidity is going to be either undefined or a function. Its like Foo = function() {}; Foo.prototype.checkValdity, which IMO is safe. 1. aptana.com/reference/api/HTMLFormElement.html – Bub

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

Vickievicksburg

Answer 3

How about

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

Source: http://diveintohtml5.info/everything.html#novalidate

Pleochroism

Answer 4

There is a problem with navigators like the Android one (versions prior to 4.4), which implements checkValidity (and this function in fact checks the inputs) but the browser does not provides any information to user (and sends the form) if some input is invalid.

However, you can check if there is any problem using validationMessage. This property shows you the error message that the browser will show to user. If checkValidity() is false but there is not validationMessage the browser doesn't have full html5 form validation support.

I've made this function. It requires as arguments all fields in the form:

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

Sample: http://jsfiddle.net/pmnanez/ERf9t/2/

Disorder

Safari 8.0.4 still returns true despite a lack of built-in validation. – Mensch

Answer 5

The following tests did not work for Safari :

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

and

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

They report true when false was expected, as Safari does not report invalid fields.

However, this test works :

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

(not tested on IE or Android)

EDIT: Safari does validate, but does not report, which explains the responses to these tests. Invalid fields can be discovered through the CSS :invalid pseudo class. A combination of these tests can be used to validate where the browser does not support validation, and report where the browser doesn't report.

Mango