HTML5 表单必需属性。设置自定义验证消息？

这是在 HTML5 中处理自定义错误消息的代码：

<input type="text" id="username" required placeholder="Enter Name"
  oninvalid="this.setCustomValidity('Enter User Name Here')"
  oninput="this.setCustomValidity('')"/>

这部分很重要，因为它在用户输入新数据时隐藏了错误消息：

oninput="this.setCustomValidity('')"

---

使用 setCustomValidity：

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

我按照 @itpastorn 在评论中的建议changed to vanilla JavaScript来自 Mootools，但如果需要，您应该能够计算出 Mootools 等效项。

编辑

我在这里更新了代码，因为 setCustomValidity 的工作方式与我最初回答时的理解略有不同。如果 setCustomValidity 设置为空字符串以外的任何内容，则会导致该字段被视为无效；所以你必须在测试有效性之前清除它，你不能只是设置它而忘记。

进一步编辑

正如下面@thomasvdb 的评论中所指出的，您需要在 invalid 之外的某些事件中清除自定义有效性，否则可能需要额外通过 oninvalid 处理程序来清除它。

---

借助 HTML5 事件 oninvalid 控制自定义消息非常简单

这是代码：

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

这是最重要的：

onvalid="this.setCustomValidity('')"

---

注意：这不再适用于 Chrome，未在其他浏览器中测试。请参阅下面的编辑。这个答案留在这里供历史参考。

如果您觉得验证字符串确实不应该由代码设置，您可以将输入元素的标题属性设置为“此字段不能留空”。 （适用于 Chrome 10）

title="This field should not be left blank."

请参阅http://jsfiddle.net/kaleb/nfgfP/8/

在 Firefox 中，您可以添加此属性：

x-moz-errormessage="This field should not be left blank."

编辑

自从我最初写这个答案以来，这似乎已经改变了。现在添加标题不会更改有效性消息，它只是在消息中添加一个附录。上面的小提琴仍然适用。

编辑 2

从 Chrome 51 开始，Chrome 现在对 title 属性没有任何作用。我不确定这在哪个版本中发生了变化。

---

借助 HTML5 oninvalid 事件控制自定义消息非常简单

这是代码：

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

---

通过在正确的时间设置和取消设置 setCustomValidity，验证消息将完美运行。

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

我使用了 onchange 而不是 oninput，它更通用，并且在任何条件下甚至通过 JavaScript 更改值时都会发生。

---

我制作了一个小型库来轻松更改和翻译错误消息。您甚至可以按当前无法使用 Chrome 中的 title 或 Firefox 中的 x-moz-errormessage 的错误类型更改文本。前往 check it out on GitHub，并提供反馈。

它的用法如下：

<input type="email" required data-errormessage-value-missing="Please input something">

有一个demo available at jsFiddle。

---

试试这个，它更好并且经过测试：

HTML：

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

JAVASCRIPT：

function InvalidMsg(textbox) {
    if (textbox.value === '') {
        textbox.setCustomValidity('Required email address');
    } else if (textbox.validity.typeMismatch){
        textbox.setCustomValidity('please enter a valid email address');
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}

演示：

http://jsfiddle.net/patelriki13/Sqq8e/

---

https://i.stack.imgur.com/NeZ6B.png

文件

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

和一些超级HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

---

防止谷歌浏览器在输入每个符号时出现错误消息的解决方案：

单击带有空白输入字段的“提交”按钮，您将看到自定义错误消息。然后在相同的输入字段中输入“-”号。

在这里您将看到浏览器在输入时的错误验证消息：

label>

给你输入时不会看到任何错误消息：

---

乍一看，我以为我知道为什么会这样，但我无法弄清楚。有人可以解释一下吗？ （IIFE 如何改变这一点？）

我有一个更简单的纯 js 解决方案：

对于复选框：

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

对于输入：

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};

---

好的，oninvalid 效果很好，但即使用户输入了有效数据，它也会显示错误。所以我用下面的方法来解决它，希望它也对你有用，

oninvalid="this.setCustomValidity('Your custom message.')" onkeyup="setCustomValidity('')"

---

调整 Salar 对 JSX 和 React 的回答后，我注意到 React Select 的行为与验证相关的 <input/> 字段不同。显然，需要几种解决方法来仅显示自定义消息并防止它在不方便的时间显示。

我提出了一个问题 here，如果它有帮助的话。 Here 是一个带有工作示例的 CodeSandbox，其中最重要的代码在此处复制：

你好.js

import React, { Component } from "react";
import SelectValid from "./SelectValid";

export default class Hello extends Component {
  render() {
    return (
      <form>
        <SelectValid placeholder="this one is optional" />
        <SelectValid placeholder="this one is required" required />
        <input
          required
          defaultValue="foo"
          onChange={e => e.target.setCustomValidity("")}
          onInvalid={e => e.target.setCustomValidity("foo")}
        />
        <button>button</button>
      </form>
    );
  }
}

SelectValid.js

import React, { Component } from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";

export default class SelectValid extends Component {
  render() {
    this.required = !this.props.required
      ? false
      : this.state && this.state.value ? false : true;
    let inputProps = undefined;
    let onInputChange = undefined;
    if (this.props.required) {
      inputProps = {
        onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")
      };
      onInputChange = value => {
        this.selectComponent.input.input.setCustomValidity(
          value
            ? ""
            : this.required
              ? "foo"
              : this.selectComponent.props.value ? "" : "foo"
        );
        return value;
      };
    }
    return (
      <Select
        onChange={value => {
          this.required = !this.props.required ? false : value ? false : true;
          let state = this && this.state ? this.state : { value: null };
          state.value = value;
          this.setState(state);
          if (this.props.onChange) {
            this.props.onChange();
          }
        }}
        value={this && this.state ? this.state.value : null}
        options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}
        placeholder={this.props.placeholder}
        required={this.required}
        clearable
        searchable
        inputProps={inputProps}
        ref={input => (this.selectComponent = input)}
        onInputChange={onInputChange}
      />
    );
  }
}

---

如果您的错误消息是单一的，请在下面尝试。

<input oninvalid="this.setCustomValidity('my error message')"
       oninput="this.setCustomValidity('')">  <!-- 👈 don't forget it. -->

要处理多个错误，请尝试以下操作

<input oninput="this.setCustomValidity('')">
<script>
inputElem.addEventListener("invalid", ()=>{
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('my error message')
    }
    return inputElem.setCustomValidity('') // default message
})
</script>

例子

您可以测试 valueMissing 和 valueMissing。

有效性状态

---

const username= document.querySelector('#username');
const submit=document.querySelector('#submit');

submit.addEventListener('click',()=>{
    if(username.validity.typeMismatch){
        username.setCustomValidity('Please enter User Name');
    }else{
        username.setCustomValidity('');
    }
if(pass.validity.typeMismatch){
        pass.setCustomValidity('Please enter Password');
    }else{
        pass.setCustomValidity('');
    }

})

---

对于完全自定义的检查逻辑：

$(document).ready(function() { $('#form').on('submit', function(e) { if ($('#customCheck').val() != 'apple') { $('#customCheck')[0].setCustomValidity('这里自定义错误！“apple”是魔术字'); $('#customCheck')[0].reportValidity(); e.preventDefault(); } }); $('#customCheck').on('input', function() { $('#customCheck')[0].setCustomValidity(''); }); });输入{显示：块；边距顶部：15px； } 输入[type="text"] { 最小宽度：250px; }

< /表格>

---

只需将“标题”与该字段一起即可轻松处理：

<input type="text" id="username" required title="This field can not be empty"  />

---