For provide client-side validation in your form put validate object to your field object.
Each field in validate object must be a function, this function take 2 arguments and and should return string with error
IMPORTANT: Synchronous validation happens on every change to your form data, so, if your field value is invalid, your field.error value will always be present.
const {} = easyHook({ initialForm: form });
type Data = { firstName: string; lastName: string; email: string; sex: string; role: string; verified: boolean; bio: string; } // type which will be returned from submitEvent type Objects = 'firstName' | 'lastName' | 'email' | 'sex' | 'role' | 'verified' | 'bio'; // types for formObject const {} = easyHook<Data, Objects>({ initialForm: form });
[]
export const formArray = [ { name: 'firstName', value: '', options: { label: 'First Name', }, validate: { required: (v) => (v.trim() === '' ? 'Required' : ''), }, }, { name: 'lastName', value: '', options: { label: 'Last Name', }, validate: { required: (v) => (v.trim() === '' ? 'Required' : ''), }, }, { name: 'email', value: '', options: { label: 'Email', }, validate: { required: (v) => (v.trim() === '' ? 'Required' : ''), checkEmail: (v) => (/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(v) ? '' : 'Not valid email'), }, }, { name: 'sex', value: '', options: { label: 'Sex', type: 'radio', buttons: [ { title: 'Male', value: 'male' }, { title: 'Female', value: 'female' }, ], }, validate: { required: (v) => (v.trim() === '' ? 'Required' : ''), }, }, { name: 'role', value: '', options: { label: 'Role', type: 'select', options: [ { title: '', value: '' }, { title: 'User', value: 'user' }, { title: 'Administrator', value: 'admin' }, { title: 'Moderator', value: 'moderator' }, ], }, validate: { required: (v) => (v.trim() === '' ? 'Required' : ''), }, }, { name: 'verified', value: false, options: { label: 'Verified', type: 'checkbox', }, }, { name: 'bio', value: '', options: { label: 'Bio', type: 'textarea', }, validate: { required: (v) => (v.trim() === '' ? 'Required' : ''), }, }, ];