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

我有以下HTML5格式：

记住我：

使用：

document.addEventListener（“DOMContentLoaded”，function（））{
var elements=document.getElementsByTagName（“输入”）；
对于（var i=0；i

我在评论中建议使用Mootools，但如果需要，您应该能够计算出Mootools的等效值

编辑 我在这里更新了代码，因为

setCustomValidity

的工作原理与我最初回答时理解的略有不同。如果

setCustomValidity

设置为空字符串以外的任何值，则会导致该字段被视为无效；因此，您必须在测试有效性之前清除它，您不能只是设置它然后忘记

进一步编辑 正如@thomasvdb在下面的评论中指出的，在

无效

之外的某些事件中，您需要清除自定义有效性，否则可能需要额外通过

oninvalid

处理程序来清除它。

使用：

document.addEventListener（“DOMContentLoaded”，function（））{
var elements=document.getElementsByTagName（“输入”）；
对于（var i=0；i

我在评论中建议使用Mootools，但如果需要，您应该能够计算出Mootools的等效值

编辑 我在这里更新了代码，因为

setCustomValidity

的工作原理与我最初回答时理解的略有不同。如果

setCustomValidity

设置为空字符串以外的任何值，则会导致该字段被视为无效；因此，您必须在测试有效性之前清除它，您不能只是设置它然后忘记

进一步编辑

---

正如@thomasvdb在下面的评论中指出的，您需要在

invalid

之外的某些事件中清除自定义有效性，否则可能需要额外通过

oninvalid

处理程序来清除它。

注意：这在Chrome中不再有效，在其他浏览器中没有测试过。请参见下面的编辑。这个答案留作历史参考

如果您觉得验证字符串确实不应该由代码设置，那么可以将输入元素的title属性设置为“thisfield不能留空”。（在Chrome 10中工作）

看

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

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

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

编辑2

---

从Chrome51开始，Chrome现在不使用title属性。我不确定这是在哪个版本中更改的。

注意：这在Chrome中不再有效，在其他浏览器中没有测试过。请参见下面的编辑。这个答案留作历史参考

如果您觉得验证字符串确实不应该由代码设置，那么可以将输入元素的title属性设置为“thisfield不能留空”。（在Chrome 10中工作）

看

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

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

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

编辑2

---

从Chrome51开始，Chrome现在不使用title属性。我不确定这是在哪个版本中更改的。

我制作了一个小型库，以便于更改和翻译错误消息。您甚至可以使用Chrome中的

title

或Firefox中的

x-moz-errormessage

更改当前不可用的错误类型文本。去，并给出反馈

它的用法如下：

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

---

有一个。

我制作了一个小库，以便于更改和翻译错误消息。您甚至可以使用Chrome中的

title

或Firefox中的

x-moz-errormessage

更改当前不可用的错误类型文本。去，并给出反馈

它的用法如下：

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

---

有一个。

借助

HTML5

oninvalid

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

代码如下：

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

用户ID

借助

HTML5

oninvalid

事件，控制自定义消息非常简单

代码如下：

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

用户ID

借助

HTML5

event

oninvalid

以下是代码：

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

---

借助

HTML5

event

oninvalid

以下是代码：

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

---

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

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

---

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

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

---

以下是处理客户的代码

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

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

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

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 type="text" id="username" required title="This field can not be empty"  />