By default form data will be validated by HTML5 validation and provided validator only on submission.
Live validation (not recommended)
By utilizing Svelte 5 reactivity, we can easily implement live validation.
While it is possible, this approach has low efficiency, because usually
revalidation of the whole form when changing one field does not make sense.
Instead of full form revalidation, we propose to perform revalidation of only the input field and full validation of the form when submitting.
The form in this example will only revalidate input fields on the input
and change
events after the first submission of the form.
Focus on first error
You can achieve focus on the first error by using the focusOnFirstError
function.
focusOnFirstError
will try to find a focusable element and focus it.
- If it’s not found, it will try to find an errors list and scroll it into view.
- If it’s not found, it will return
false
.
Errors list
Creating a list of errors is pretty simple.