javascript - 自定义 HTML5 表单验证最初不显示自定义错误

Question

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

http://jsfiddle.net/6gsr3r4b/

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

Javascript

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.reportValidity()使其显示出来。

setCustomValidity(message)

Sets a custom error message string to be shown to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid. To clear this state, invoke the function with an empty string passed as its argument. In this case the custom error message is cleared, the element is considered valid, and no message is shown.

reportValidity()

Checks the element's value against its constraints and also reports the validity status; if the value is invalid, it fires an invalid event at the element, returns false, and then reports the validity status to the user in whatever way the user agent has available. Otherwise, it returns 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>

---

您还可以使用 HTML5 pattern attribute无需 JavaScript 即可执行大多数表单验证，或使用 JavaScript 进行扩充以设置自定义错误消息。

Pattern: A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.

<form id="form">
  <label for="field">Favorite number</label>
  <input type="text" id="field" pattern="\d*" title="Field must be a number." required />
  <input type="submit" />
</form>