Example of custom form field validation

[dandv]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

I'm trying to figure out how to correctly validate a form field in v5.3, using custom code (e.g. by calling a remote API endpoint). The documentation doesn't offer a JavaScript example, only the already-validated Server-side example.

Motivation and context

The Server-side section suggests adding .is-invalid and .is-valid classes, while the How it works documentation mentions :invalid and :valid pseudoclasses, and links to the WhatWG spec for the constraint validation API.

A canonical example of custom validation for a form field would be great.

• might be worth documenting that running myField.setCustomValidity('...message...') won't set that message in the .invalid-feedback div, or better separating the constraint validation API capabilities from the "Server-side" ones
• it's unclear how to show an interim "Validating..." message while an AJAX call would be in progress

[dandv]

@julien-deramond Any updates? I find it peculiar that rather common use cases involving programmatic actions via JavaScript aren't covered in the documentation at all.

In the meantime I added an example on StackOverflow. Turns out the .valid-feedback div doesn't need an id, and doesn't need to be added to the aria-described-by attribute. Would've helped to mention these aspects explicitly, or implicitly with an example using both kinds of feedback.