So zeigen Sie die setCustomValidity-Nachricht / den Tooltip ohne Submit-Ereignis an

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.