sveltekit-superforms
sveltekit-superforms copied to clipboard
Consistent Client and Server validations with form constrains
Is your feature request related to a problem? Please describe.
I would like a way to have consistent client and server side validations, while also having form constraints in place.
Currently, you can add client-side validation that behaves just like the server-side validations by setting the validators property to a client-adapted version of a shared schema between the frontend and backends. The experience of the validations, whether happening on the client-side or from a form action response are the same, which is fantastic.
However, if you add your constraints (via spreading them {...$constraints.field}), then the browser-native validations kick-in, which changes the experience dramatically. Which would be fine, as you can just omit the constraints from the fields, but then your form inputs behave differently and limit the user experience to allowing the user to type past a length-limited text field or input a number above a limit for a numeric input, for example.
Adding a novalidate attribute to the form element doesn't work either, because then it disables Superforms from running it's validations on the client-side, which changes the user-experience to require a round-trip for basic input validations.
Describe the solution you'd like
Ideally, for me, Superforms would be able to (either by default or by configuration) still run it's client-side validations, bypassing the browser-native validation experience, while keeping the constraints in place.
While the browser-native validation experience is sub-par, the constraints experience is a nice way to provide early signal to a user on what is supported for a field.
Describe alternatives you've considered
I've tried doing some funky event overrides to try and disable browser-native validations without disabling Superforms client-side validations, but I haven't succeeded and they all feel pretty clunky anyway, given how configurable the validation experience is otherwise.