HTML5-Formular erforderlich Attribut. Benutzerdefinierte Validierungsnachricht festlegen?

326

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

Skizit
quelle
1
Oh, +1 für die verrückte Nachricht zur Überprüfung des leeren Passworts = / Wie hat das die Qualitätssicherung bestanden, ich frage mich ...
David sagt, Monica am
3
Warum nicht einfach die Standardnachricht des Browsers akzeptieren? Das sehen Benutzer für jede andere Site, die sie besuchen. Sie verwirren Ihre Benutzer nur, indem Sie eine nicht standardmäßige Nachricht erstellen. (Google hat wahrscheinlich mehr UX-Bewertungen und -Tests zur Ermittlung dieses Wortlauts durchgeführt als Sie!).
ChrisV
12
@ChrisV Was ist mit mehrsprachigen Websites?
Inemanja
1
In meinem Fall möchte ich vor dem Posten überprüfen, ob der Wert eine Zahl ist, aber ich kann das Attribut type = "number" (aus Gründen) nicht verwenden. Daher setze ich das Musterattribut so, dass nach Zahlen und optionalen Dezimalstellen gesucht wird, die die Nachricht enthalten , "Bitte passen Sie das angeforderte Format an", bei Fehler. Ich möchte lieber sagen: "Ihr müsst uns eine Nummer Bucko schenken."
Kristopher

Antworten:

267

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.

Robertc
quelle
Ich habe es versucht, aber es gibt immer noch einen Fehler. Wenn Sie das Feld leer lassen, wird die Nachricht angezeigt. Geben Sie dann etwas in das Feld ein. Jetzt wird jedoch eine leere Nachricht angezeigt, und die Aktion wird nicht ausgeführt. Wenn Sie jetzt erneut auf die Schaltfläche klicken, wird sie durchlaufen.
Thomasvdb
1
@thomasvdb Versuchen Sie, die benutzerdefinierte Gültigkeit auf eine leere Zeichenfolge für das inputEreignis festzulegen . Im Moment wird es nur gelöscht, wenn das invalidEreignis ausgelöst wird.
Robertc
Dies ist in der Tat die Lösung. Fand es mit der Lösung von @hleinone heraus. Danke für die Antwort!
Thomasvdb
4
Die obige Lösung verwendet nur JQuery, um auf das Laden des Dokuments zu warten. Alles andere ist reines JS und DOM. Ein Browser, der modern genug ist, um setCustomValidity zu unterstützen, sollte auch das DOMContentLoaded-Ereignis unterstützen. Dies bedeutet, dass JQuery nicht benötigt wird, wenn es für nichts anderes verwendet wird.
Itpastorn
1
@ Lai32290, da Sie nicht auf das eigentliche DOM-Objekt zugreifen. $("")Gibt ein Array von Objekten zurück, auch wenn es nur eines gibt. $("")[i]ist höchstwahrscheinlich das, was Sie wollen.
Noah Passalacqua
288

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('')"
Somnath Kadam
quelle
Funktioniert perfekt unter Firefox 29.0 und Chrome 34.0.1847.137.
Fernando Kosh
perfekt und bisher in FF 38. Behebt einen Fehler bei der E-Mail-Validierung, wenn nur oninvalid () verwendet wird.
Andrew
Funktioniert nicht in Safari auf dem iPad oder iPhone. Funktioniert jedoch wie erwartet in Chrome Desktop.
Nabeel
2
@ somnath-kadam Ist es ein Fehler oder haben Sie absichtlich oninput = "setCustomValidity ('')" anstelle von oninput = "this.setCustomValidity ('')"
tormuto
3
Vielen Dank, dass Sie oninput = "setCustomValidity ('')" als am wichtigsten markiert haben. Das hat mir den Tag gerettet.
singhpradeep
99

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('')"
Ashwini Jain
quelle
3
Überprüfen Sie auch andere Validierungen wie Muster, Min / Max-Werte usw. sanalksankar.blogspot.com/2010/12/…
Jaider
10
Dies führt zu einem Fehler in Firefox, der bei der Aktualisierung überprüft wird, bei Änderung und Korrektur jedoch fehlschlägt.
Ryan Charmley
12
@ RyanCharmley unter Verwendung onchange="this.setCustomValidity('')"des Fehlers wird verschwunden sein. Überprüfen Sie meine Antwort unten.
Salar
4
Wenn dies nicht funktioniert (z. B. in Safari nicht), verwenden Sie oninputstattdessen anstelle von onvalid.
Jimothy
2
@Jimothy hat recht damit, oninputist die universellere Lösung, onvalidhat auch in Chrome für mich nicht funktioniert.
ThisGuyCantEven
68

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.

kzh
quelle
1
Dies ändert nichts am tatsächlichen Nachrichteninhalt.
Wesley Murch
2
Zu der Zeit habe ich es getestet.
kzh
3
Mein Fehler, OP spezifizierte Chrome 10, ich war auf FF5. Downvote entfernt, ich entschuldige mich. Wow, diese Fehlermeldung in Chrome ist die hässlichste , die ich je gesehen habe.
Wesley Murch
2
Für deklarative Fehlermeldungen in Firefox verwenden Sie das Attribut:x-moz-errormessage="This field should not be left blank."
Robertc
2
Dies fügt eine beschreibende Nachricht unter "Bitte füllen Sie dieses Feld aus" hinzu.
Magne
41

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')">
Dharmendra Jha
quelle
4
Es ist erforderlich, die Gültigkeitsnachricht auf leer zu setzen, sobald die Steuerung die Eingabe erneut erhält. Andernfalls wird die zuerst ausgeführte Gültigkeitsnachricht für alle Felder angezeigt. Fügen Sie oninput = "setCustomValidity ('')" hinzu, wenn Sie setCustomValidity () aufrufen. +1 auf Somnaths Antwort.
Tarang
41

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.

Salar
quelle
Dies sollte die akzeptierte Antwort sein. Arbeitete unter Windows 10 1709 in den folgenden Browsern: Chrome 66.0.3359.139 64-Bit, Firefox 59.0.3 (64-Bit), Internet Explorer 11.431.16299.0, Edge 41.16299.402.0. Arbeitete unter macOS 10.13.2 in Safari 11.0 (13604.1.38.1.6). Arbeitete in Android 4.4.4 in Chrome 66.0.3359.158. Für diejenigen, die den JSX-Weg suchen : onInvalid={(e) => { e.target.setCustomValidity('foo') }} onChange={(e) => { e.target.setCustomValidity('') }}.
GuiRitter
Nachtrag: eKann null sein, z. B. wenn eine Option aus einem React Select-Feld entfernt wird. Vergessen Sie nicht, das zu überprüfen.
GuiRitter
Errata: onChangeonInvalidinputProps={{ onInvalid: …, onChange: …, }}
Um
Nachtrag: type='email'ist etwas schwieriger zu behandeln, da setCustomValiditySets verwendet werden customError: true, e.target.validityauch wenn die Eingabe gültig ist. Ich versuche einen Weg zu finden, um das Problem zu beheben.
GuiRitter
@GuiRitter Hast du das herausgefunden?
EvilJordan
38

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 .

Hleinon
quelle
Vielen Dank! Ich habe meinen kleinen Fehler behoben, der als Kommentar in der akzeptierten Antwort erwähnt wurde.
Thomasvdb
Gute Antwort, da OP Google Chrome verwendet; obwohl dies in IE Edge nicht funktioniert
CoderHawk
23

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/

Rikin Patel
quelle
hey .... nette Lösung, aber type = email funktioniert im Safari-Browser nicht. Werfen
Sie
2
Ja, es wird für Safari nicht unterstützt, aber ich habe eine Antwort für die festgelegte benutzerdefinierte Validierungsnachricht gegeben.
Rikin Patel
10

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.Geben Sie hier die Bildbeschreibung ein

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>
Collin White
quelle
3
Trotz des Fehlers, der nur Buchstaben sagt, lässt das Muster Platz und Apostroph? Auch A-zerlaubt '[', '\', ']', '^', '_' und '`'.
Lawrence Dol
5

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>

Andrei Veshtard
quelle
3

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');
};
bernhardh
quelle
1

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}
      />
    );
  }
}
GuiRitter
quelle
1

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('')"

Umesh Patil
quelle
-7

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"  />
Deepti
quelle
Dies ändert nichts an der angezeigten Fehlermeldung. Beim Bewegen des Mauszeigers wird nur ein Titel in der Eingabe angezeigt.
Mathieu Dumoulin
Dies ist nicht die korrekte Verwendbarkeit von "title", um eine Warnung für das Eingabefeld anzuzeigen.
Sajad Saderi