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。这是否有问题，还是我做错了？

- reptilicus

---

你自己提到了："checkValidity() 返回 true 或 false"，因此该方法似乎会“返回一个值”，告诉脚本它是否有效，而不是实际执行某些操作（例如提示用户、阻止输入等）。因此，你的 onblur 事件处理程序实际上“起作用”，只是没有执行 UI 相关的操作。 - Passerby

是的，它没有抛出错误。当我实际提交表单时，验证确实起作用，并且在存在错误输入时会弹出弹窗。这就是我想要的 onBlur... - reptilicus

我猜你想在用户“完成”输入时触发验证弹出窗口？这是不可能的，因为这是浏览器的行为，而不是HTML规范。您可以使用if(!obj.checkValidity()){...}来“模拟”该行为。 - Passerby

是的，这正是我在这里追求的。当用户在上面的字段中输入无效数字并模糊到下一个字段后，在他们实际提交并可能有多个错误之前提醒他们错误。 - reptilicus

似乎没有办法在checkValidity()失败时触发浏览器的默认操作，除非您进行完整的提交。这有点遗憾。 - Todd Vance

Answer 1

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

- Dean Brettle

---

你应该得到一枚金牌。 - trex

Answer 2

这是一个演示，展示了您可能想要前往的内容：

http://jsfiddle.net/9gSZS/

（说明：此内容为HTML格式，保留了HTML标签）

<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。

- Passerby

Answer 3

这里是一个解决方案

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

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

- Calvin Newton

Answer 4

你应该使用onChange事件。

例如：

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

- judgement

Answer 5

onblur="checkValidity()" 没有作用，因为 blur 事件不可取消。

- int32_t