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, Feb 18 '15 at 08:35

score 12 · Accepted Answer · edited Jan 09 '14 at 14:14

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 09 '14 at 14:14

Steve Tauber

9,551
5
42
46

answered Nov 22 '12 at 16:27

willydee

187
3
10

1

+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](http://jsfiddle.net/Un2Ck/)). [1](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) [2](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input) – aaaaaa Mar 19 '14 at 21:14

score 4 · Answer 2 · edited Jul 18 '17 at 13:10

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 '17 at 13:10

Scott C Wilson

19,102
10
61
83

answered Feb 09 '12 at 17:57

Madara's Ghost

172,118
50
264
308

But I'd still like the browser to validate, if javascript is not available. – Evert Feb 09 '12 at 18:17
6

Then add the novalidate attribute with the javascript. – Rich Bradshaw Feb 09 '12 at 18:28
Or set the `required` property to `false` with JavaScript. – Jukka K. Korpela Feb 09 '12 at 18:55
I should have been able to come up with this answer myself :) Thank you ! – Evert Feb 10 '12 at 02:36
Adding the `novalidate` attribute to an input field doesn't work as of today in the latest Chrome or Firefox. Please see: https://stackoverflow.com/questions/9216115/override-html5-validation#comment34263872_13516781 – Hakan B. Feb 17 '15 at 22:02
@HakanB. Thanks. I pinged the asker and asked him to change the accept mark (for which he did). – Madara's Ghost Feb 20 '15 at 10:22
A more specific note and less strikethrough would be more helpful... If the answer is now *totally* incorrect, please delete it. – jonrsharpe Feb 20 '15 at 11:48

tabris · Answer 3 · 2014-06-12T19:41:02.743

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 '14 at 19:41

answered Jun 12 '14 at 19:33

tabris

67
5

score 0 · Answer 4 · answered Aug 02 '13 at 07:42

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 02 '13 at 07:42

Alex Rock

831
6
26

score -1 · Answer 5 · answered Sep 17 '19 at 13:21

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

Override html5 validation

5 Answers5

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

Linked