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

Question

我有以下 HTML5 表单：http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

目前，当我在它们都为空白时按 Enter 键时，会出现一个弹出框，上面写着“请填写此字段”。如何将默认消息更改为“此字段不能留空”？

编辑： 另请注意，类型密码字段的错误消息只是*****。要重新创建它，请给用户名一个值并点击提交。

编辑：我正在使用 Chrome 10 进行测试。请做同样的事情

Answer 1

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

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

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

oninput="this.setCustomValidity('')"

Answer 2

使用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("");
        };
    }
})

我 changed to vanilla JavaScript 来自 Mootools，正如 cmets 中 @itpastorn 所建议的那样，但如果需要，您应该能够计算出等效的 Mootools。

编辑

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

进一步编辑

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

Answer 3

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

代码如下：

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

这是最重要的：

onvalid="this.setCustomValidity('')"

Answer 4

注意：这不再适用于 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 属性没有任何作用。我不确定这是在哪个版本中更改的。

Answer 5

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

代码如下：

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

Answer 6

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

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

我使用了onchange 而不是oninput，后者更通用，即使通过 JavaScript 在任何条件下更改值都会发生。

Answer 7

我制作了一个小型库来轻松更改和翻译错误消息。您甚至可以通过错误类型更改文本，目前在 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。

Answer 8

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

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/

Answer 9

我发现的最简单和最干净的方法是使用数据属性来存储您的自定义错误。使用一些自定义 html 测试节点的有效性并处理错误。

le javascript

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>

Answer 10

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

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
  <label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
  <input id="test_number_1" type="number" min="0" required="true"
         oninput="this.setCustomValidity('')"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

<form method="post" action="#">
  <p></p>
  <label for="text_number_1">Here you will see no error messages on input:</label><br>
  <input id="test_number_2" type="number" min="0" required="true"
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

Answer 11

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

对于复选框：

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

对于输入：

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

Answer 12

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

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

Answer 13

根据 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}
      />
    );
  }
}

Answer 14

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

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

<form>
<input pattern="[^\\/:\x22*?<>|]+"
       placeholder="input file name"       
       oninput="this.setCustomValidity('')"
       required
>
  <input type="submit">
</form>

<script>
  const form = document.querySelector("form")

  const inputElem = document.querySelector(`input`)

  inputElem.addEventListener("invalid", ()=>{   
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('Illegal Filename Characters \\/:\x22?<>|')
    }
    return inputElem.setCustomValidity('') // return default message according inputElem.validity.{badInput, customError, tooLong, valueMissing ...}
  })

  form.onsubmit = () => {
    return false
  }
</script>

• ValidityState

Answer 15

只需在字段中加上“标题”即可轻松处理：

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