epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.49k stars 337 forks source link

Form controls should support server validation #1491

Open wossig opened 2 years ago

wossig commented 2 years ago

Vuestic-ui version: 1.3.4

What is the current behavior? In the current version, the form control only has rules for verification, but in the most real scenario, we need a request to the server to check whether already exists, or check it whether is valid.

and under the current version, it's hard to integrate the server validation. we can use error-messages and change to achieve the server validation goal but not smoothly and prop rules will be out of work.

Other information

asvae commented 2 years ago

Thanks. Looks very reasonable.

Can you provide some details?

I.e. server validation you're speaking of is not on submit, but rather on input change?

So, you type stuff in input, you debounce + send requests to backend + you show response in error-messages for that field.

If so, that looks like pretty minimal pathway to implement this logic?

Regarding rules usage, I would imagine that also to work in a sense that you can trigger validation for field on change, then if validation passes - trigger backend validation.

Or was your idea to have form-wide and more automated frontend+backend validation of sorts?

Happy to discuss this and correct me if I'm wrong :).

wossig commented 2 years ago

For better UX, we want to trigger the server validation after input changed.

I.e. server validation you're speaking of is not on submit, but rather on input change? I think both change and submit can trigger server validation

Here's an example for custom validation(used callback) for inspiration https://element-plus.org/en-US/component/form.html#custom-validation-rules

And here's an async validation library that may be useful. https://github.com/yiminghe/async-validator