Question

我正在处理一个简单的登录表单，其中有两个字段：

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

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

但是，如果javascript可用，我想接管html5表单验证，并自己处理所有内容。

我想自动验证'onblur'（仅受影响的字段），并且我想在点击'submit'时验证所有字段。

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

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

Answer 1

请注意 - 即使某些浏览器可能支持 INPUT 元素上的 novalidate 属性，HTML代码也无法验证。

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

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

Answer 3

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

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

Answer 4

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

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

覆盖html5验证

5 个答案:

这个答案是不正确的。请参阅willydee的回答。