Override html5 validation

Question

I'm working on a simple login form, with two fields:

<form>
  <input type="email" name="email" required />
  <input type="password" name="password" required />
  <button type="submit">Log in</button>
</form>

For modern browsers, validation is automatically triggered.

However, if Javascript is available, I want to take over the html5 form validation, and handle everything myself.

I want to validate automatically 'onblur' (only the affected field) and I want to validate all fields when 'submit' is clicked.

The onblur events work fine, however.. When 'submit' is pressed, the standard 'submit' event is not triggered. However, an 'invalid' event is triggered; but only for the first invalid event.

What's a nice way to tell the browser to ignore all HTML5-related validation, and take over the entire process?

Hey, please unaccept my answer and accept willydee's, it's incorrect. — Madara's Ghost
– Madara's Ghost, Commented Feb 18, 2015 at 8:35

Steve Tauber · Accepted Answer · 2014-01-09 14:14:24Z

12

Please be advised that — even though some browsers may support the attribute novalidate on INPUT elements — the HTML code does not validate.

According to documentation there is no such attribute. Only the FORM element may contain the novalidate attribute.

edited Jan 9, 2014 at 14:14

Steve Tauber

10.3k5 gold badges45 silver badges48 bronze badges

answered Nov 22, 2012 at 16:27

willydee

1873 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aaaaaa Over a year ago

+1. The novalidate attribute is only supported on form elements, and can be substituted by the formnovalidate attribute on submit buttons and images only. "Regular" inputs have no such attribute. In fact, I don't know if that solution worked at the time the answer was posted, but it doesn't as of today in the latest Chrome and Firefox (demo). 1 2

Scott C Wilson · Accepted Answer · 2017-07-18 13:10:16Z

4

This answer is incorrect. Please see willydee's answer.

~~Simple, just add the novalidate property to any element you don't want the browser to validate, like so:~~

<form> <input type="email" name="email" required novalidate /> <input type="password" name="password" required /> <button type="submit">Log in</button> </form>

Since you wish to only cancel validation when JavaScript is available, add it with JavaScript (using jQuery for simplified example)

$('input[novalidate]').attr('novalidate', 'novalidate');

edited Jul 18, 2017 at 13:10

Scott C Wilson

19.7k11 gold badges64 silver badges88 bronze badges

answered Feb 9, 2012 at 17:57

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

7 Comments

Evert Over a year ago

But I'd still like the browser to validate, if javascript is not available.

Rich Bradshaw Over a year ago

Then add the novalidate attribute with the javascript.

Jukka K. Korpela Over a year ago

Or set the required property to false with JavaScript.

Evert Over a year ago

I should have been able to come up with this answer myself :) Thank you !

Hakan B. Over a year ago

Adding the novalidate attribute to an input field doesn't work as of today in the latest Chrome or Firefox. Please see: stackoverflow.com/questions/9216115/…

|

tabris · Accepted Answer · 2014-06-12 19:41:02Z

1

Another option if you are using jQuery for example is to remove the attribute.

$("input[required],select[required],textarea[required]").removeAttr('required');

edited Jun 12, 2014 at 19:41

answered Jun 12, 2014 at 19:33

tabris

675 bronze badges

Comments

Alex Rock · Accepted Answer · 2013-08-02 07:42:54Z

0

Maybe you can use javascript to transform all "required" attributes into "data-required" for you can handle them with javascript and to override html5 form validation with your own handler

answered Aug 2, 2013 at 7:42

Alex Rock

8307 silver badges27 bronze badges

Comments

Ali Sufyan · Accepted Answer · 2019-09-17 13:21:56Z

-1

If you want to conditional HTML5 validation operation.

My condition is that I want to stop validation if user want to save there data but when its want to send form I want to validate.

<button name="btn_act" value="Submit" type="submit" class="btn">Submit</button>
<button name="btn_act" value="save" type="submit" class="btn">Save</button>

$(document).on('click','[name="btn_act"]',function(){

        var $form = $(this).closest('form');
        //console.log($form);
        if(this.value === 'save')
            $form[0].noValidate = true;
        else
            $form[0].noValidate = false;
        //$form.data('validator').cancelSubmit = true;
        //$form.submit();
    });

answered Sep 17, 2019 at 13:21

Ali Sufyan

751 silver badge8 bronze badges

Collectives™ on Stack Overflow

Override html5 validation

5 Answers 5

1 Comment

This answer is incorrect. Please see willydee's answer.

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

This answer is incorrect. Please see willydee's answer.

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related