Skip to content
solid-validation

solid-validation

The browser already knows this field is invalid. This library puts that in a store you can render.

Tab out of a field without filling it in. Validation runs on blur, and the error clears the moment you start typing again.

That form is running the real library. Two directives, one store:

const { formSubmit, validate, errors, isSubmitting } = useForm();


<form use:formSubmit={onSubmit}>
  <input type='email' name='email' required use:validate />
  <span>{errors.email}</span>


  <input name='handle' required use:validate={[minLength(3), noSpaces]} />
  <span>{errors.handle}</span>
</form>

What it does

required, type="email", minlength and pattern already work in every browser. What browsers do not give you is the error message in a place you can style, position and translate. useForm runs the native check, falls through to your own validators when the native check passes, and writes whatever failed into a reactive store keyed by field name.

There is no schema to declare and no field registry to keep in sync. A field joins the form by being marked with use:validate, and it leaves when it unmounts.

What it does not do

It does not manage your values. There is no values store and no controlled-input wrapper. Read values with FormData on submit, or with your own signals. The library only owns error state.

It also does not validate on every keystroke. Errors appear on blur and on submit, and clear on the next input into a field that is already showing one.

Ready to use it? Start with the quick start.