HTML5 Chrome checkValidity onBlur

HTML5 Chrome checkValidity onBlur

本文关键字：onBlur checkValidity Chrome HTML5      更新时间：2023-09-26

我试图在模糊上做一个简单的数字输入字段的checkValidity，但不能让它正常工作。这在Chrome中工作吗?例如:

<input onBlur="checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>

或

<input onBlur="this.checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>

似乎什么都不做。但是，在控制台中，

$("#x")[0].checkValidity()

根据输入框中的当前值和(64,2048)的限制返回true或false。这是坏了，还是我做错了?

我意识到这个问题已经存在许多年了，但是如果其他人遇到它，实现OP想要的行为的正确方法似乎是使用onblur="reportValidity()"而不是onblur="checkValidity"。

这是您可能想要的一个演示:

http://jsfiddle.net/9gSZS/

<input type="number" min="64" max="256" onblur="validate(this);" />

function validate(obj)
{
  if(!obj.checkValidity())
  {
    alert("You have invalid input. Correct it!");
    obj.focus();
  }
}
请注意，我只是在演示概念在这里;alert可能会导致非常不愉快的体验，所以不要直接复制。

使用一些浮动DIV来吸引用户，而不是完全阻塞的alert。

你应该使用onChange Event

例如

var input1 = document.getElementById('txt_username');
    input1.onchange = function(){
        input1.setCustomValidity(input1.validity.patternMismatch ? 'username must match a-z,A-Z,0-9,4-16 character' : ''); 
    }

这是一个解决方案

$("form").focusout(function(){
        if(!$("form")[0].checkValidity()){
            setTimeout(function(){$(":submit").eq(0).trigger('click');},0);
        }
    });

如果您的任何表单元素失去焦点，您检查表单有效性。如果表单无效，请使用jquery单击第一个提交按钮。由于某种原因，必须使用超时才能使其工作。timeout为0只是将函数移动到函数队列的末尾。

onblur="checkValidity()"无效，因为blur事件不可取消。

相关文章：