自定义HTML5表单验证最初未显示自定义错误

Question

具有自定义验证的基本HTML5表单。如果提交的值不是数字，浏览器应显示错误消息“字段必须是数字”如果输入“abc”并按submit（或按enter键），该字段将标记为无效，但不会显示错误消息。再次按submit（或按enter）将显示消息。这种双重提交行为出现在Windows和OS X上最新版本的Firefox、Chrome、Safari和IE上。您会注意到默认的“此字段是必需的…”消息在第一次提交时出现，不会表现出奇怪的行为。

http://jsfiddle.net/6gsr3r4b/

顺便说一句，我很清楚，这种验证在旧版本的IE中不起作用，输入字段可能有一种类型的number，可以自动完成这种验证；这是我的问题的简化示例，仅用于演示目的。

Javcript

var form = document.getElementById("form");
var field = document.getElementById("field");

form.onsubmit = validateForm;

function validateForm() {

    if(isNaN(field.value)) {
        field.setCustomValidity("Field must be a number.");
    } else {
        return true;
    }

    return false;
}

HTML

<form id="form">
    <label for="field">Favorite number</label>
    <input type="text" id="field" required>
    <input type="submit">
</form>

Answer 1

设置好有效性消息后，需要调用element.reportValality（）使其显示出来。

setCustomValidity（消息）

设置提交表单时向用户显示的自定义错误消息字符串，解释为什么该值无效-设置消息时，有效性状态设置为无效。若要清除此状态，请调用作为参数传递的空字符串的函数。在这种情况下，自定义错误消息被清除，元素被视为有效，并且没有显示任何消息。

reportValidity（）

根据元素的约束检查元素的值，并报告有效性状态；如果该值无效，它将在元素处激发无效事件，返回false，然后以用户代理可用的任何方式向用户报告有效性状态。否则，它将返回true。

当输入无效时，您还需要在表单提交事件上使用event.preventDefault（），这样表单提交就不会通过。

以下是一个例子：

var form = document.getElementById('form');
var field = document.getElementById('field');

form.onsubmit = validateForm;

/* this is the function that actually marks the field as valid or invalid */
function validateForm(event) {
    if (isNaN(field.value)) {
        field.setCustomValidity('Field must be a number.');
        field.reportValidity();
        event.preventDefault();
    }
    
    field.setCustomValidity('');
}

<form id="form">
    <label for="field">Favorite number</label>
    <input type="text" id="field" required />
    <input type="submit" />
</form>