Override Html5 Validation

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

Solution 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

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

Solution 3:

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

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

Solution 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

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