Override html5 validation

问题

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?

回答1:

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.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
http://www.w3.org/TR/html5/forms.html#the-form-element
http://www.w3.org/TR/html5/forms.html#the-input-element

回答2:

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');

回答3:

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

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

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/9216115/override-html5-validation

标签

javascript

jquery

html

dom-events