Ich verwende die grundlegende Formularvalidierung, um zu überprüfen, ob die E-Mail das richtige Format hat. Dann werden die Daten von Ajax gesendet, wo überprüft wird, ob die E-Mail-Adresse bereits verwendet wird, und ob der Benutzer Land / Bundesland ausgewählt oder Standardwerte in Auswahlfeldern belassen hat.
Damit die HTML5-Formularvalidierung durchgeführt werden kann, ist jedoch ein Übermittlungsereignis erforderlich. Wenn Sie auf "Senden" klicken, wird die Ajax-Operation für die grundlegende Formularüberprüfung ausgeführt. Wenn jedoch Ergebnisse vorliegen, möchte ich dieselben Browser-Tooltips für die Konsistenz der Benutzeroberfläche verwenden (und ich auch wie sie aussehen).
Gibt es eine Möglichkeit, sie zum Anzeigen zu bringen? Ich konnte nicht feststellen, ob es ein besonderes Ereignis für sie gibt oder etwas wie das Auslösen eines Submit-Ereignisses, aber ich habe es sofort gestoppt. Im Moment erhält das Feld nur einen roten Rand und eine Fehlermeldung wird angezeigt, wenn Sie mit der Maus darüber fahren, während der Tooltip beim erneuten Klicken auf die Schaltfläche "Senden" angezeigt wird.
Auch für Browser ohne native Tooltips (in meinem Fall Safari) verwende ich Webshims Lib und es verhält sich genauso wie in Chrome und Firefox.
8 Antworten
Ich dachte, .checkValidity()
würde den Trick machen, aber es löst nicht die Benutzeroberfläche aus.
Es hört sich so an, als würde .reportValidity()
tun, was Sie wollen. http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity
Ich weiß allerdings noch nicht, ob Browser es implementieren: /
Wie die meisten Leute sagen, müssen Sie input.setCustomValidity("message")
verwenden.
Das Problem hierbei ist, dass Sie diese Validierung innerhalb des Ereignisses submit
nicht überprüfen können, da Sie einen Ajax-Aufruf ausführen und dann setCustomValidity
asynchron festlegen müssen.
Grundsätzlich müssen Sie also das Ereignis change
des Eingabefelds verwenden und bei jeder Änderung den Ajax-Aufruf ausführen. Oder entfernen Sie die Senden-Schaltfläche und verwenden Sie das Ereignis click
einer normalen Schaltfläche. Überprüfen Sie die eindeutige E-Mail im Ajax-Aufruf und rufen Sie dann Senden über Javascript auf.
Sehen Sie sich ein Beispiel für die letzte Option mit jQuery an:
<form action="/sign-in" id="form">
<input type="email" id="email" required/>
<button id="submit">Submit</button>
</form>
// we capture the click instead the submit
$("#submit").on("click",function(){
var $elem = $("#email");
var email = $elem.val();
//the ajax call returns true if the email exists
$.get( "ajax/checkUniqueEmail", function(data) {
if(data === "true"){
$elem.setCustomValidity("This email already exists.");
}else{
$elem.setCustomValidity("")
}
//then we submit the form
$("#form").submit();
});
});
Hier ist ein schönes Live-Beispiel, das benutzerdefiniert eine Formulareingabe validiert / Feedback gibt.
Das grundlegende Javascript sieht aus wie:
function checkPasscode() {
var passcode_input = document.querySelector("#passcode");
if (passcode_input.value != "Ivy") {
passcode_input.setCustomValidity("Wrong. It's 'Ivy'.");
} else {
passcode_input.setCustomValidity(""); // be sure to leave this empty!
alert("Correct!");
}
}
HTML:
<form>
<label for="passcode">Enter Passcode:</label>
<input id="passcode"
type="password"
placeholder="Your passcode"
oninput="checkPasscode();"
required/>
<button type="submit">Submit</button>
</form>
Es ist eigentlich sehr einfach - fügen Sie Ihrem Formular ein verstecktes Eingabeelement hinzu:
<input type="hidden" id="myFormCheck" required="true" value=""/>
Rufen Sie myInputField.setCustomValidity(message)
für das Eingabeelement auf, für das Sie einen benutzerdefinierten Tooltip erstellen möchten, und rufen Sie dann Ihr form.click();
auf
Der Formulargültigkeitsprozess wird ausgeführt und zeigt das Nachrichten-Popup über diesem Element an. Das Formular wird jedoch aufgrund des ausgeblendeten Elements nicht gesendet, sodass Sie das Übermittlungsereignis nicht abfangen und abbrechen müssen.
Wenn Sie fertig und bereit sind, legen Sie einen Wert für das ausgeblendete Element fest, und das Formular wird normal gesendet.
Auf diese Weise können Sie den Tooltip des Formulars verwenden, um beispielsweise nach verfügbaren Benutzernamen zu suchen oder einen beliebigen Wert über eine HTTP-Anforderung usw. abzugleichen.
Überprüfen Sie diesen Link ( Stellen Sie benutzerdefinierte Validierungsnachrichten mithilfe von setCustomValidity in HTML 5-Seiten ).
Im obigen Link verwendete er den Typ "Eingabe" als Nummer und als Eingabe nannte er die Validierungsfunktion. Lassen Sie mich wissen, wonach Sie suchen.
<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">
Eine Antwort finden Sie unter diesem Link: So erzwingen Sie eine HTML5-Formularüberprüfung, ohne sie über jQuery zu senden
Grundsätzlich finden Sie eine Senden-Schaltfläche und rufen darauf an:
// force form validation
document.getElementById("submitbutton").click()
Sie können die Validierungsnachricht auch ändern, nachdem Sie überprüft haben, ob die E-Mail-Adresse verwendet wird oder nicht, und dann die Formularvalidierung wie oben erzwingen:
document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()
Eine Polyfüllung für HTMLFormElement.reportValidity()
.
Getestet mit IE11 und Edge. Wenn Sie jedoch mit IE11 in der folgenden StackOverflow-Sandbox ausgeführt werden, werden die Überprüfungsmeldungen nicht angezeigt.
function reportValidityPolyfill() {
const button = createInvisibleSubmitButton();
this.appendChild(button);
this.addEventListener("submit", submitEventHandler);
var isValid = false;
button.click();
this.removeEventListener("submit", submitEventHandler);
this.removeChild(button);
return isValid;
function createInvisibleSubmitButton() {
const button = document.createElement("button");
button.type = "submit";
button.style.display = "none";
return button;
}
function submitEventHandler(event) {
event.preventDefault();
isValid = true;
}
}
if (!HTMLFormElement.prototype.reportValidity) {
HTMLFormElement.prototype.reportValidity = reportValidityPolyfill;
console.log("ReportValidity polyfill installed.");
} else {
console.log("ReportValidity polyfill skipped.");
}
input {
outline: 1px solid #0f0;
}
input:invalid {
outline: 1px solid #f00;
}
<form id="form1">
Enter a number from 1 to 5: <input type="number" min="1" max="5" required>
</form>
<br>
<div onclick="console.log('Validity: ' + document.getElementById('form1').reportValidity())">
Click here to call reportValidity()
</div>
Sie können setCustomValidity mit für das Element verwenden, wenn die Bedingung falsch ist (Sie können dies in jedem Ereignishandler wie Tastendruck oder Klicken tun). Wenn die Eingabe NICHT gültig ist, SUBMIT. Dadurch wird der Tooltip für die Nachricht des Browsers ausgelöst.