A SolidJS library for simplifying form validations.
npm install solid-form-handlerDocumentation is available here.
solid-form-handler is a fully equipped library for building form components and validating forms with them. Under the hood, it works with the built-in granular reactivity of SolidJS stores.
It supports the following data assertion libraries: yup and zod, however other validators will be supported in the future.
- Gives full control of your form components definition.
- Integrated with yup and zod to ease form schema definition - Other validators will be supported in the future.
- Full reactivity during form input, validation, and submission.
- Simple manipulation of fieldsets (array of fields or dynamic forms).
- Simple validation of complex data structures.
- Very intuitive APIs.
- Can be used on any SolidJS UI library or CSS framework.
You can start by creating your own form field components by using each of the code given on the docs website. The following is a final implementation of them:
``tsx
import { useFormHandler } from 'solid-form-handler';
import { yupSchema } from 'solid-form-handler/yup';
import { Checkbox, Checkboxes, Radios, Select, TextInput } from '@components';
import * as yup from 'yup';
type User = {
name: string;
email: string;
country: number;
favoriteFoods: number[];
gender: 'male' | 'female' | 'other';
subscribed: boolean;
};
export const userSchema: yup.SchemaOf
name: yup.string().required('Required field'),
email: yup.string().email('Invalid email').required('Required field'),
country: yup.number().required().required('Required field').typeError('Country is required'),
favoriteFoods: yup.array(yup.number().required('Required field')).min(2),
gender: yup.mixed().oneOf(['male', 'female', 'other'], 'Invalid value').required('Required field'),
subscribed: yup.boolean().required('Required field'),
});
export const App: Component = () => {
const formHandler = useFormHandler(yupSchema(userSchema));
const { formData } = formHandler;
const submit = async (event: Event) => {
event.preventDefault();
try {
await formHandler.validateForm();
alert('Data sent with success: ' + JSON.stringify(formData()));
formHandler.resetForm();
} catch (error) {
console.error(error);
}
};
return (