Hook Easy Form

Validation Form Example

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 });

Values

```
[]
```

Code

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' : ''),
    },
  },
];