it-swarm.com.de

HTML5-Formular Erforderliches Attribut. Benutzerdefinierte Validierungsnachricht einstellen?

Ich habe das folgende HTML5-Formular erhalten: 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 die Eingabetaste drücke, wenn beide leer sind, wird ein Popup-Fenster mit der Meldung "Bitte dieses Feld ausfüllen" angezeigt. Wie kann ich diese Standardnachricht in "Dieses Feld darf nicht leer bleiben" ändern?

EDIT: Beachten Sie auch, dass die Fehlernachricht des Typs Kennwortfeld einfach ***** lautet. Um dies neu zu erstellen, geben Sie dem Benutzernamen einen Wert und klicken Sie auf "Senden".

EDIT: Ich verwende zum Testen Chrome 10. Bitte mach das gleiche

252
Skizit

Verwenden Sie 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 in Vanilla JavaScript von Mootools geändert, wie von @itpastorn in den Kommentaren vorgeschlagen, aber Sie sollten in der Lage sein, das Äquivalent von Mootools zu ermitteln, falls erforderlich.

Bearbeiten

Ich habe den Code hier aktualisiert, da setCustomValidity etwas anders arbeitet als ich es ursprünglich verstanden habe. Wenn für setCustomValidity ein anderer Wert als die leere Zeichenfolge festgelegt ist, wird das Feld als ungültig betrachtet. Sie müssen es daher vor dem Testen der Gültigkeit löschen, Sie können es nicht einfach einstellen und vergessen.

Weitere Bearbeitung

Wie im @ thomasvdb-Kommentar unten ausgeführt, müssen Sie die benutzerdefinierte Gültigkeit außerhalb von invalid löschen. Andernfalls wird möglicherweise ein zusätzlicher Durchlauf durch den oninvalid-Handler ausgeführt, um sie zu löschen.

223
robertc

Hier ist der Code für die Verarbeitung der benutzerdefinierten Fehlermeldung 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 die Fehlermeldung ausgeblendet wird, wenn der Benutzer neue Daten eingibt:

    oninput="this.setCustomValidity('')"
186
Somnath Kadam

Es ist sehr einfach, benutzerdefinierte Nachrichten mithilfe von HTML5 event oninvalid zu steuern.

Hier ist der Code: 

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

Das ist am wichtigsten:

onvalid="this.setCustomValidity('')"
88
Ashwini Jain

Hinweis: Dies funktioniert nicht mehr in Chrome und wurde in anderen Browsern nicht getestet. Siehe unten stehende Änderungen. Diese Antwort wird hier zur historischen Referenz gelassen.

Wenn Sie der Meinung sind, dass die Überprüfungszeichenfolge wirklich nicht durch Code festgelegt werden sollte, können Sie das title-Attribut des Eingabeelements auf "Dieses Feld kann nicht leer bleiben" setzen. (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. Wenn Sie nun einen Titel hinzufügen, ändert sich die Gültigkeitsnachricht nicht, es wird lediglich ein Nachtrag zur Nachricht hinzugefügt. Die oben genannte Geige gilt immer noch.

Bearbeiten 2

Chrome macht jetzt nichts mehr mit dem Titelattribut ab Chrome 51. Ich weiß nicht, in welcher Version sich das geändert hat.

65
kzh

Ich habe eine kleine Bibliothek erstellt, um das Ändern und Übersetzen der Fehlermeldungen zu erleichtern. Sie können die Texte sogar nach Fehlertyp ändern, der derzeit nicht verfügbar ist, indem Sie title in Chrome oder x-moz-errormessage in Firefox verwenden. Geh schau es dir auf GitHub an und gib Feedback.

Es wird verwendet wie:

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

Es gibt eine Demo unter jsFiddle .

36
hleinone

Benutzerdefinierte Meldungen können mit dem Ereignis HTML5oninvalid sehr einfach gesteuert werden

Hier ist der Code:

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

Durch Einstellen und Deaktivieren der Variable setCustomValidity zur richtigen Zeit funktioniert die Überprüfungsnachricht einwandfrei.

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

Ich habe onchange anstelle von oninput verwendet. Dies ist allgemeiner und tritt auf, wenn der Wert in irgendeiner Bedingung auch durch JavaScript geändert wird.

33
Salar

Probieren Sie es 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/

19
Rikin Patel

Dies ist sehr einfach, um die HTML-Eingabetypnachricht zu steuern. Keine Notwendigkeit, JS oder CSS verwenden nur HTML5.

Als Erstes können Sie dieses Attribut "nur ungültig" verwenden

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">

Oder Sie können das Attribut "oninput" verwenden

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">
11
Obaidul Haque

Die einfachste und sauberste Methode, die ich gefunden habe, ist die Verwendung eines Datenattributs zum Speichern Ihres benutzerdefinierten Fehlers. Testen Sie den Knoten auf Gültigkeit und behandeln Sie den Fehler mithilfe einer benutzerdefinierten HTML-Datei. enter image description here

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>
10
Collin White

Ich habe eine einfachere Lösung für Vanilla js:

Für Checkboxen:

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

Für Eingänge:

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

Die Lösung zum Verhindern 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>

1
Andrei Veshtard

Okay, oninvalid funktioniert gut, zeigt jedoch einen Fehler, auch wenn der Benutzer gültige Daten eingegeben hat. Ich habe es unten verwendet, um es anzugehen. Ich hoffe, es wird auch für Sie funktionieren.

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

1
Umesh Patil

Kann leicht gehandhabt werden, indem einfach 'title' in das Feld eingegeben wird:

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

Als ich die Antwort von Salar an JSX und React anpaßte, fiel mir auf, dass sich React Select nicht wie ein <input/>-Feld bezüglich der Validierung verhält. Offensichtlich sind mehrere Problemumgehungen erforderlich, um nur die benutzerdefinierte Nachricht anzuzeigen und zu verhindern, dass sie zu unbequemen Zeiten angezeigt wird.

Ich habe ein Problem here angesprochen, wenn es irgendetwas hilft. Here ist eine CodeSandbox mit einem Funktionsbeispiel, und der wichtigste Code 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}
      />
    );
  }
}
0
GuiRitter