HTML5-Formular-Attribut. Legen Sie die benutzerdefinierte Validierung Nachricht?

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

Ich geändert Vanille JavaScript von Mootools, wie vorgeschlagen, durch @itpastorn in den Kommentaren, aber Sie sollten in der Lage sein, zu arbeiten, die Mootools gleichwertig, wenn nötig.

Bearbeiten

Habe ich aktualisiert, der code hier als setCustomValidity funktioniert etwas anders als das, was ich Verstand, als ich ursprünglich antwortete. Wenn setCustomValidity festgelegt ist etwas anderes als die leere Zeichenkette, wird dazu führen, dass das Feld als ungültig betrachtet werden; daher müssen Sie löschen Sie es, bevor die Prüfung der Gültigkeit können Sie nicht nur einstellen und vergessen.

Weiter Bearbeiten

Wie schon in @thomasvdb Kommentar unten, müssen Sie deaktivieren Sie die benutzerdefinierte Gültigkeit in einem Ereignis außerhalb der invalid sonst kann es eine zusätzliche pass durch die oninvalid - handler, um es zu deaktivieren.

Es ist sehr einfach zu Steuern, benutzerdefinierte Nachrichten mit Hilfe von HTML5 Veranstaltung oninvalid

Hier ist der code:

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

Dies ist der wichtigste:

onvalid="this.setCustomValidity('')"

Habe ich eine kleine Bibliothek zu erleichtern, verändern und übersetzen die Fehlermeldungen. Sie können sogar ändern Sie die Texte von Fehler-Art, die derzeit nicht verfügbar title in Chrom oder x-moz-errormessage im Firefox. Gehen check it out auf GitHub, und feedback geben.

Es ist wie:

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

Gibt es eine die demo auf jsFiddle.

Es ist sehr einfach zu Steuern, benutzerdefinierte Nachrichten mit Hilfe der HTML5 oninvalid Veranstaltung

Hier ist der code:

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

Der einfachste und sauberste Weg, die ich gefunden habe, ist ein data-Attribut speichern Sie Ihre benutzerdefinierten Fehler. Testen Sie den Knoten für die Gültigkeit und den Fehler behandeln, indem Sie einige benutzerdefinierte html.

le javascript

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

- und einige HTML5-super

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

Okay, oninvalid gut funktioniert, aber es zeigt Fehler, auch wenn Benutzer eingegebenen Daten gültig sind. Also ich habe unten anzugehen es, hoffe, es wird für Sie arbeiten,

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

Anpassung Salar's Antwort auf JSX und Reagieren, bemerkte ich, dass Reagieren, Wählen Sie benimmt sich nicht nur wie ein <input/> Feld zur überprüfung. Anscheinend mehrere workarounds nötig sind, um nur die benutzerdefinierten Nachricht und halten Sie es von der Anzeige zu ungünstigen Zeiten.

Habe ich ein Problem angesprochen hier, wenn es hilft nichts. Hier ist ein CodeSandbox mit einem Beispiel arbeiten, und das wichtigste-code gibt es hier wiedergegeben:

Hello.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}
      />
    );
  }
}