HTML5 Chrome checkValidity onBlur

Question

我正在尝试对模糊的数字输入字段执行简单的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。这是坏了，还是我做错了？

Answer 1

这是对您可能想要去的内容的演示：

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。

Answer 2

你应该使用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' : ''); 
    }

Answer 3

这是一个解决方案

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

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

Answer 4

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

Answer 5

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