Investigation Input/Form validation

[abdolian]

Type of inputs

• pattern
• text
• email
• url
• number
• color
• date
• datetime
• month
• tel
• time
• week
• password
• range
• file

Properties

• step
• required
• min
• max
• minlength
• maxlength
• minItems
• maxItems
• size

Inputs/Components

• input
• select
• checkbox
• radio
• textarea
• file
• autocomplete
• slider

Status

• pristine
• dirty
• valid
• invalid
• touched
• validating
• submitting

Actions

• submit
• reset

Events

• before submit
• success
• error
• complete

Validation On

• key press
• blur
• form submiting
• manual

Other

• init value
• messages
• custom messages
• variables in messages
• nested property
• localization
• async

Libraries

• https://github.com/sha256/Pristine
• https://www.npmjs.com/package/just-validate
• Pure JS library https://validatejs.org 14.2 KB
• https://chainlist.github.io/svelte-forms/
• https://www.npmjs.com/package/svelte-forms-lib
• https://www.npmjs.com/package/validator
• https://felte.dev/
• https://svelte-forms-lib-sapper-docs.vercel.app/introduction
• https://www.npmjs.com/package/svelte-use-form

Information

• https://www.the-art-of-web.com/html/html5-form-validation/
• https://www.w3.org/WAI/tutorials/forms/validation/

[abdolian]

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

[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} />

[abdolian]

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