Javascript 覆盖html5验证

我正在编写一个简单的登录表单，其中包含两个字段：

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

登录

对于现代浏览器，验证是自动触发的

然而，如果Javascript可用，我想接管html5表单验证，并自己处理所有事情

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

不过，onblur事件工作正常。。按下“提交”时，不会触发标准的“提交”事件。但是，会触发“无效”事件；但仅适用于第一个无效事件

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

这个答案不正确。请看Willyde的回答。 很简单，只需将

novalidate

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

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

---

请注意，即使某些浏览器可能支持输入元素上的属性novalidate，HTML代码也不会验证

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

根据文件，没有这样的属性。只有FORM元素可以包含novalidate属性

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

---

也许您可以使用javascript将所有“必需”属性转换为“必需数据”，因为您可以使用javascript处理这些属性，并使用自己的处理程序覆盖html5表单验证

例如，如果您使用jQuery，另一个选项是删除属性

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

---

如果你想要有条件的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();
    });

提交
拯救
$（文档）。在（'click'，'name=“btn_act”]”上，函数（）{
var$form=$（this）.closest（'form'）；
//console.log（$form）；
如果（this.value==='save'）
$form[0]。noValidate=true；
其他的
$form[0]。noValidate=false；
//$form.data（'validator'）。cancelSubmit=true；
//$form.submit（）；
});

但如果javascript不可用，我仍然希望浏览器进行验证。然后用javascript添加novalidate属性。或者用javascript将

required

属性设置为

false

。我自己应该能够得出这个答案：）谢谢！在最新的Chrome或Firefox中，向输入字段添加

novalidate

属性到今天为止都不起作用。请参阅：+1。

formnovalidate

属性仅在

form

元素上受支持，并且只能由提交按钮和图像上的

formnovalidate

属性替代。“常规”输入没有这样的属性。事实上，我不知道这个解决方案在发布答案时是否有效，但在最新的Chrome和Firefox（）中，到今天为止还没有。嘿，请接受我的回答，接受威利的，这是不正确的。