Validation

Usage

Use validators property to enable validation.

Loading...

function BasicForm() { const form = useForm({ onSubmit(values) { alert(JSON.stringify(values, null, 2)) console.log('values', values) }, children: [ { label: 'First Name', name: 'firstName', component: 'Input', value: '', validators: { required: 'First name is required', }, }, { label: 'Last Name', name: 'lastName', component: 'Input', value: '', validators: { required: 'Last name is required', minLength: [6, 'min length is 6'], }, }, { component: 'Submit', text: 'submit', }, ], }) return <Form form={form} /> }

function BasicForm() {
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },

    children: [
      {
        label: 'First Name',
        name: 'firstName',
        component: 'Input',
        value: '',
        validators: {
          required: 'First name is required',
        },
      },
      {
        label: 'Last Name',
        name: 'lastName',
        component: 'Input',
        value: '',
        validators: {
          required: 'Last name is required',
          minLength: [6, 'min length is 6'],
        },
      },
      {
        component: 'Submit',
        text: 'submit',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO

Built-in validator rules

List of Built-in validator rules supported:

• required?: string;
• min?: [number, string];
• max?: [number, string];
• minLength?: [number, string];
• maxLength?: [number, string];
• pattern?: [RegExp, string];
• arrayNotEmpty?: string;
• equalTo?: [string, string];