HTML5-Formular-Attribut erforderlich. Benutzerdefinierte Validierungsmeldung festlegen?

Question

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 und beide Felder leer sind, erscheint ein Popup-Fenster mit der Meldung "Bitte füllen Sie dieses Feld aus". Wie kann ich diese Standardmeldung in "Dieses Feld kann nicht leer gelassen werden" ändern?

EDITAR: Beachten Sie auch, dass die Fehlermeldung für das Feld type password einfach lautet ***** . Um dies neu zu erstellen, geben Sie dem Benutzernamen einen Wert und klicken Sie auf Senden.

EDITAR : Ich verwende Chrome 10 zum Testen. Bitte tun Sie das Gleiche

Answer 1

Durch das Setzen und Lösen der setCustomValidity zur richtigen Zeit, wird die Validierungsmeldung einwandfrei funktionieren.

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

Ich habe onchange anstelle von oninput die allgemeiner ist und auftritt, wenn der Wert in einer beliebigen Bedingung geändert wird, auch durch JavaScript.

Answer 2

Ich habe eine kleine Bibliothek erstellt, um das Ändern und Übersetzen der Fehlermeldungen zu erleichtern. Sie können sogar die Texte nach Fehlertyp ändern, was derzeit nicht möglich ist, indem Sie title in Chrome oder x-moz-errormessage in Firefox. Weiter Ausprobieren auf GitHub und geben Sie Feedback.

Es wird verwendet wie:

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

Es gibt eine Demo verfügbar bei jsFiddle .

Answer 3

Versuchen Sie es hiermit, 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/

Answer 4

Der einfachste und sauberste Weg, den ich gefunden habe, ist die Verwendung eines Datenattributs, um Ihren benutzerdefinierten Fehler zu speichern. Testen Sie den Knoten auf Gültigkeit und behandeln Sie den Fehler mit einer benutzerdefinierten HTML.

le javascript

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

und einige super HTML5

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

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