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

Posted 2023-02-22

【中文标题】自定义 HTML5 表单验证最初不显示自定义错误

【英文标题】：Custom HTML5 form validation not showing custom error initially

【发布时间】：2014-12-24 04:01:52

【问题描述】：

带有自定义验证的基本 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>

【参考方案1】：

设置有效性信息后，需要调用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 pattern attribute 在不使用 JavaScript 的情况下进行大多数表单验证，或者使用 JavaScript 进行扩充以设置自定义错误消息。

模式：检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。使用 title 属性来描述模式以帮助用户。当 type 属性的值为 text、search、tel、url 或 email 时，该属性适用；否则将被忽略。正则表达式语言与 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>

【讨论】：

一个可靠的答案。但是，如果您想根据用户遇到的特定问题进行自定义消息传递怎么办？例如，如果它是电话号码，并且该字段是 7 位数字，则消息可能是“请输入区号”。或类似的东西。

@Jason 在这种情况下，您可能希望在 onchange 事件处理程序中添加一些逻辑，每次字段内容更改时都会触发该事件处理程序。

***.com/questions/13798313/…

嘿，jsFiddle 总是给我“字段必须是数字。” 即使我只输入一个数字。这不再起作用了吗？

@AnishRamaswamy 你是对的；看起来 setCustomValidity is 现在用于将字段标记为无效。我不确定这是否是一个新的变化，或者当我写这个答案时我最初是否误解了文档。 MDN 有一个很好的概述here。