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

我按照@itpastor在评论中的建议从 Mootools更改为 vanilla JavaScript ，但如果需要，您应该能够计算出 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

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

这是代码：

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目前无法使用的错误类型更改文本。 去GitHub 上查看，并提供反馈。

它的用法如下：

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

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 测试节点的有效性并处理错误。

文件

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/>字段不同。 显然，需要几种解决方法来仅显示自定义消息并防止其在不方便的时间显示。

我在这里提出了一个问题，如果它有帮助的话。 这是一个带有工作示例的 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>

• 有效性状态

Answer 15

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('');
    }

})

Answer 16

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

 $(document).ready(function() { $('#form').on('submit', function(e) { if ($('#customCheck').val() != 'apple') { $('#customCheck')[0].setCustomValidity('Custom error here! "apple" is the magic word'); $('#customCheck')[0].reportValidity(); e.preventDefault(); } }); $('#customCheck').on('input', function() { $('#customCheck')[0].setCustomValidity(''); }); });

 input { display: block; margin-top: 15px; } input[type="text"] { min-width: 250px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <input type="text" placeholder="dafault check with 'required' TAG" required/> <input type="text" placeholder="custom check for word 'apple'" id="customCheck" /> <input type="submit"> </form>

Answer 17

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

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