覆盖HTML5验证

Question

我正在开发一个简单的登录表单，包含两个字段：

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

对于现代浏览器，验证会自动触发。

然而，如果Javascript是可用的，我想接管html5表单验证，并自行处理所有内容。

我希望在“失焦”时自动进行验证（仅验证受影响的字段），并且希望在单击“提交”时验证所有字段。

“失焦”事件可以正常工作，但是...当单击“提交”时，标准的“提交”事件不会触发。然而，只有第一个无效事件会触发“invalid”事件。

有没有什么好方法告诉浏览器忽略所有与HTML5相关的验证，并接管整个流程呢？

- Evert

---

嘿，请取消接受我的答案并接受willydee的，我的答案是不正确的。 - Madara's Ghost

Answer 1

请注意，尽管某些浏览器可能支持在INPUT元素上使用novalidate属性，但HTML代码不会验证。

根据文档，不存在这样的属性。只有FORM元素可以包含novalidate属性。

• 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

- willydee

---

+1. novalidate 属性仅支持在 form 元素上使用，并且可以通过提交按钮和图像上的 formnovalidate 属性进行替换。 "常规" 输入没有这样的属性。 实际上，我不知道该解决方案是否在回答发布时起作用，但在最新的 Chrome 和 Firefox 中（演示），它并不起作用。 [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

Answer 2

该回答不正确。请参考willydee的回答。

只需向您不希望浏览器验证的任何元素添加novalidate属性，如下所示：

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

由于您希望仅在JavaScript可用时取消验证，请使用JavaScript（使用jQuery进行简化示例）添加它

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

- Madara's Ghost

---

但是如果 JavaScript 不可用，我仍希望浏览器进行验证。 - Evert

请在JavaScript中添加novalidate属性。 - Rich Bradshaw

或者使用 JavaScript 将 required 属性设为 false。 - Jukka K. Korpela

@HakanB. 谢谢。我联系了提问者，并要求他更改接受标记（他已经做了）。 - Madara's Ghost

更具体的注释和较少的删除线会更有帮助...如果答案现在完全不正确，请将其删除。 - jonrsharpe

Answer 3

如果您正在使用jQuery，则另一种选项是删除属性。

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

- tabris

Answer 4

也许你可以使用 JavaScript 将所有的 "required" 属性转换为 "data-required"，这样你就可以使用 JavaScript 处理它们，并用自己的处理程序覆盖 HTML5 表单验证。

- Alex Rock

Answer 5

如果您想进行HTML5条件验证操作。

我的条件是，如果用户想要保存数据，我希望停止验证，但当它想要发送表单时，我希望进行验证。

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

- Ali Sufyan