Open abdolian opened 2 years ago
I've extensively researched form validation, you can see the result of the investigation above. My suggestion is to write a library (pure or svelte) with this syntax:
<Form on:submit={handler}>
<Input name="username" type="email" required />
<Messages for="username">
</Form>
Something like this: https://codesandbox.io/s/svelte-validation-5g23oj
What do you think? @ap-ubeac @TheHadiAhmadi
@abdolian what do you think about vuetify's rules prop
that was interesting for me, very simple and customizable system.
<script>
const rules = [
value => !!value || "this field is Required"
value => value.length > 3 || "Minimum Length is 3 characters",
value => value.length < 20 || "Maximum Length is 20 characters",
value => /[0-9].*/g.test(value) || "only numbers"
]
</script>
<FormInput {rules} />
It's ok for the test and particular cases but in the general produces some problems:
1- Duplication of error messages. We have a lot of inputs that produce a similar error message. For example 'This field is required'.
2- Implementing the localization is too difficult.
3- Duplication of code in the same scenarios. For example, Validation of an email with a regex.
4- Gets away from native syntax. I think <input required/>
is very clear and similar to the native as well.
But for your suggestion, we can create a collection of small functions to merge them together and solve the 1 to 3 options. @TheHadiAhmadi @ap-ubeac
Type of inputs
Properties
Inputs/Components
Status
Actions
Events
Validation On
Other
Libraries
Information