How to show setCustomValidity message/tooltip without submit event

It's actually very simple - add a hidden input element to your form:

<input type="hidden" id="myFormCheck" required="true" value=""/>

Call myInputField.setCustomValidity(message) on the input element you want to create a custom tooltip on then call your form.click();

The form validity process runs and displays the message popup over that element, but the form won't submit because of the hidden element, so you won't need to catch and cancel the submit event.

When you're done and really ready to go, set a value on the hidden element and the form will submit normally.

This way you can use the form tooltip for something like checking for usernames that are available, or matching any value over an HTTP Request etc.

A polyfill for HTMLFormElement.reportValidity().
Tested with IE11 and Edge. But when running in the StackOverflow sandbox below with IE11, the validation messages are not displayed.

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>

You can find an answer at this link: How to force a html5 form validation without submitting it via jQuery

Basically, you find a submit button and call click on it:

// force form validation
document.getElementById("submitbutton").click()

You can also change validation message after checking if email address is in use or not and then force form validation as above:

document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()

I thought .checkValidity() would do the trick, but it doesn't trigger the UI. (caniuse)

It sounds like .reportValidity() does what you want. (caniuse)