Optional form live validation process

[discoverlance-com]

A way to add live validation process to remix Forms.

The idea is to expose a property on the Form export from remix that basically calls a function with the current form values on update of any formData.
There can be an extra attribute to determine whether the function should be called onBlur or after a debounce (seconds) or immediately on each form input keystroke or formData change.

Then we expose a hook to access that data and display validation errors or messages returned from that function.

import { Form, useFormValidation } from 'remix';

type FormVal = {
 errors?:  Record<string, string>[];
}
...

export default createRoute() { 
  let formValidation = useFormValidation<FormVal>();

  const validateForm = (values) => {
    if (typeof(values.name) === number) {
       return {
         errors: [name: 'Sorry name should not be a number']
       }
     }
  }

  return (
    <div> 
      <Form method="post" onInput={validateForm, 'onBlur'}>
         <label>Full Name </label>
         <input name='name' type='text' />
         {formValidation?.errors?.name && <p> {formValidation?.errors?.name} </p>}
      </Form>
    </div>
  );
}

[discoverlance-com]

I do understand it's the philosophy of remix to depend upon using traditional tooling already existing like form validation with HTML but I think this is just another way to also attract the attention of that modern developer like myself that is just used to live form input validation with javascript. This will allow the setup to be a breeze without too much extra work to setup tools like yup or react-hook-forms or relying on native browser form input elements validation.

Sometimes too forms can be a pain to validate only after user clicks submit as we can instead run some custom validations early and let the user be aware of errors earlier.

[airjp73]

Currently, there are a couple libraries that address this specifically for remix.

• https://github.com/airjp73/remix-validated-form
• https://github.com/kiliman/remix-params-helper

[discoverlance-com]

I see. Those are very good libraries for live form validation especially the remix-validated-form.

[musou1500]

certainly, form validation can also be implemented as a third-party library(as mentioned in #1608 (comment)).

but providing built-in form validation method is attractive.

additionaly, schema validation library for POJO is bit over abstraction for me.
(I want a way that specialized for validating FormData object)

so I want built-in form live validation process feature with following characteristics.

• feedback validation results to user before submit form
• share validation constraints between server and client
• specialized for validating FormData object(instead of transform it to POJO and apply schema validation)

I have a dirty draft implementation of this idea.

https://gist.github.com/musou1500/a6a8304ebd78dd0e5523ee36bcf88573

[kiliman]

I doubt things like this will ever be included in Remix core. Forms have such variety, it would be difficult to add something that would work for all use-cases. It's easy to add your own code or library to handle this to suit your needs.