Async field
<input
id="username"
name="username"
required
data-validate="available-username"
/>Async demo
Remote Validation
Username availability checked with an async custom rule and debounced input validation.
Back to demo galleryDeveloper notes
Async rules can validate remote conditions while input validation is debounced to avoid noisy checks.
Debounced rule
const validator = new A11yFormValidator(form, {
...createDefaultPreset(),
validateOn: ["submit", "blur", "input"],
debounce: 250
});
validator.registerRule("availableUsername", async ({ value }) => {
await new Promise((resolve) => setTimeout(resolve, 150));
return {
valid: !taken.has(String(value).trim().toLowerCase()),
message: "That username is already taken."
};
});