How do you create custom validation messages?

Call setCustomValidity("message") to flag an input invalid with your own error, then setCustomValidity("") to clear it once valid (or the form won't submit).

const input = document.querySelector("#username");

input.addEventListener("input", () => {
    if (input.value.includes(" ")) {
        input.setCustomValidity("Username cannot contain spaces");
    } else {
        // Clear error
        input.setCustomValidity("");
    }
});

Important: You must clear the custom validity when the input becomes valid, otherwise the form won't submit.

Combining with HTML5 validation:

<input type="text" required minlength="3" id="username">

// HTML5 handles required and minlength
// Custom validation for additional rules
input.addEventListener("input", () => {
    if (input.value.includes("admin")) {
        input.setCustomValidity("Reserved username");
    } else {
        input.setCustomValidity("");
    }
});