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.

36
Alexxandar 8 Okt. 2012 im 20:06

8 Antworten

Beste Antwort

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

42
Ben Boyle 30 Jän. 2014 im 13:39

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();
    });
});
1
Ma Jerez 15 Juni 2015 im 09:43

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>
1
zelusp 28 Aug. 2017 im 18:00

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.

4
Neil 3 Juli 2014 im 11:14

Ü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)">
2
thomasbabuj 19 Okt. 2012 im 10:16

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()
12
Community 23 Mai 2017 im 12:02

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>
2
Christian d'Heureuse 14 Nov. 2017 im 23:55

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.

0
Ivan Ivković 15 Jän. 2013 im 08:12