HTML5-Formular erforderlich Attribut. Benutzerdefinierte Validierungsnachricht festlegen?

Ich habe das folgende HTML5-Formular: 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"/>

Wenn ich derzeit die Eingabetaste drücke, wenn beide leer sind, wird ein Popup-Fenster mit der Aufschrift "Bitte füllen Sie dieses Feld aus" angezeigt. Wie würde ich diese Standardnachricht in "Dieses Feld darf nicht leer bleiben" ändern?

BEARBEITEN: Beachten Sie auch, dass die Fehlermeldung des Typkennwortfelds einfach lautet *****. Um dies neu zu erstellen, geben Sie dem Benutzernamen einen Wert und klicken Sie auf Senden.

BEARBEITEN : Ich verwende Chrome 10 zum Testen. Bitte machen Sie das gleiche

Verwendung 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 habe von Mootools zu Vanille-JavaScript gewechselt, wie von @itpastorn in den Kommentaren vorgeschlagen, aber Sie sollten in der Lage sein, das Mootools-Äquivalent zu ermitteln, falls erforderlich.

Bearbeiten

Ich habe den Code hier aktualisiert, da er setCustomValidityetwas anders funktioniert als bei meiner ursprünglichen Antwort. Wenn setCustomValidityetwas anderes als die leere Zeichenfolge festgelegt ist, wird das Feld als ungültig betrachtet. Daher müssen Sie es löschen, bevor Sie die Gültigkeit testen. Sie können es nicht einfach einstellen und vergessen.

Weiter bearbeiten

Wie im Kommentar von @ thomasvdb unten ausgeführt, müssen Sie die benutzerdefinierte Gültigkeit in einigen Fällen löschen, da invalidsonst möglicherweise ein zusätzlicher Durchgang durch den oninvalidHandler erforderlich ist , um sie zu löschen.

Hier ist der Code für die Behandlung von benutzerdefinierten Fehlermeldungen in HTML5

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

Dieser Teil ist wichtig, da er die Fehlermeldung verbirgt, wenn der Benutzer neue Daten eingibt:

oninput="this.setCustomValidity('')"

Es ist sehr einfach, benutzerdefinierte Nachrichten mithilfe von HTML5Ereignissen zu steuernoninvalid

Hier ist Code:

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

Das ist am wichtigsten:

onvalid="this.setCustomValidity('')"

Hinweis: Dies funktioniert nicht mehr in Chrome und wird nicht in anderen Browsern getestet. Siehe Änderungen unten. Diese Antwort wird hier als historische Referenz hinterlassen.

Wenn Sie der Meinung sind, dass die Validierungszeichenfolge wirklich nicht durch Code festgelegt werden sollte, können Sie das title-Attribut Ihres Eingabeelements so einstellen, dass "Dieses Feld darf nicht leer gelassen werden". (Funktioniert in Chrome 10)

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

Siehe http://jsfiddle.net/kaleb/nfgfP/8/

In Firefox können Sie dieses Attribut hinzufügen:

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

Bearbeiten

Dies scheint sich geändert zu haben, seit ich diese Antwort ursprünglich geschrieben habe. Durch das Hinzufügen eines Titels wird die Gültigkeitsnachricht nicht geändert, sondern lediglich ein Nachtrag zur Nachricht hinzugefügt. Die obige Geige gilt immer noch.

Bearbeiten 2

Chrome macht ab Chrome 51 jetzt nichts mehr mit dem title-Attribut. Ich bin mir nicht sicher, in welcher Version sich dies geändert hat.

Es ist sehr einfach, benutzerdefinierte Nachrichten mithilfe des HTML5 oninvalidEreignisses zu steuern

Hier ist der Code:

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

Durch Einstellen und Deaktivieren zum setCustomValidityrichtigen Zeitpunkt funktioniert die Validierungsnachricht einwandfrei.

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

Ich habe onchangestattdessen verwendet, oninputwas allgemeiner ist und auftritt, wenn der Wert unter beliebigen Bedingungen auch über JavaScript geändert wird.

Ich habe eine kleine Bibliothek erstellt, um das Ändern und Übersetzen der Fehlermeldungen zu vereinfachen. Sie können die Texte sogar nach Fehlertyp ändern, der derzeit titlein Chrome oder x-moz-errormessageFirefox nicht verfügbar ist . Probieren Sie es auf GitHub aus und geben Sie Feedback.

Es wird verwendet wie:

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

Bei jsFiddle ist eine Demo verfügbar .

Probieren Sie dieses aus, es ist besser und getestet:

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

Demo:

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

Der einfachste und sauberste Weg, den ich gefunden habe, besteht darin, ein Datenattribut zum Speichern Ihres benutzerdefinierten Fehlers zu verwenden. Testen Sie den Knoten auf Gültigkeit und behandeln Sie den Fehler mithilfe eines benutzerdefinierten HTML-Codes.

le Javascript

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

und etwas super HTML5

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

Die Lösung zur Vermeidung von Google Chrome-Fehlermeldungen bei der Eingabe jedes Symbols:

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

Ich habe eine einfachere Vanille js einzige Lösung:

Für Kontrollkästchen:

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

Für Eingaben:

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

Als ich die Antwort von Salar an JSX und React anpasste, bemerkte ich, dass sich React Select nicht wie ein <input/>Feld für die Validierung verhält . Anscheinend sind mehrere Problemumgehungen erforderlich, um nur die benutzerdefinierte Nachricht anzuzeigen und zu verhindern, dass sie zu ungünstigen Zeiten angezeigt wird.

Ich habe hier ein Problem angesprochen , wenn es etwas hilft. Hier ist eine CodeSandbox mit einem funktionierenden Beispiel, und der wichtigste Code dort wird hier wiedergegeben:

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

Okay, oninvalid funktioniert gut, aber es zeigt Fehler an, selbst wenn der Benutzer gültige Daten eingegeben hat. Also habe ich unten verwendet, um es anzugehen, hoffe, dass es auch für Sie funktioniert,

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

Kann einfach gehandhabt werden, indem einfach 'title' in das Feld eingefügt wird:

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