Check If a Browser Has Built-In HTML5 Form Validation

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

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

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

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

Can I use the browsers built in HTML5 email validation in JS?

I think you can using the checkValidity method on each element:

var email = document.getElementById('email');
var isValid = email.checkValidity();

if (isValid) {
    // Submit form
}

You can also use the validity property on an element to check which validation constraints failed:

var validity = email.validity;
if (validity.valueMissing) {
    return 'Please enter your email';
}

Use form validation javascript only when browser can not validate form

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

if(hasBrowserValidation){
    //validate form
} 

html5 form validation modernizr safari

The reason why Modernizr says that email/required attributes are supported in Safari 5, is that they are supported and you can use the constraint validation API (i.e. input.checkValidity(), input.validity etc.). Safari 5.0.x has no validation UI and this is the reason, why they have turned off so called interactive form validation ( = preventing submit and showing an errormessage, if validation fails).

Actually, your browser sniffing isn't right. Chrome already supports HTML5 from validation and Safari 6 will support it also. This said a possible more futureproof, could look like this:

yepnope(
{
    test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && ( !$.browser.webkit || parseInt($.browser.version, 10) > 533),
    nope : 'javascript/webforms_home.js'
});

You can find some extra tests regarding form validation here.

Update: Modernizr has now an additional feature detect for interactive constraint validation

Use browsers built in validation of the required attribute in combination with Angular 5?

You should try adding the attribute ngNativeValidate in your form element to prevent Angular from adding the novalidate html attribute. As explained in the Angular NgNoValidate directive documentation.

If you want to use native validation with Angular forms, just add ngNativeValidate attribute

---

Related Topics