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

Custom HTML5 form validation not showing custom error initially

本文关键字：自定义 显示 错误 HTML5 表单 验证      更新时间：2023-09-26

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

http://jsfiddle.net/6gsr3r4b/

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

Javscript

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>

设置有效性消息后，需要调用element.reportValidity()使其显示。

setCustomValidity(message)

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

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>

您还可以使用HTML5模式属性在不使用JavaScript的情况下进行大多数表单验证，或者使用JavaScript进行增强以设置自定义错误消息。

Pattern：检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。使用title属性描述模式以帮助用户。当type属性的值为text、search、tel、url或电子邮件时，此属性适用；否则它将被忽略。正则表达式语言与JavaScript语言相同。图案周围没有正斜杠。

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

相关文章：