Validation Hooks

• On Form Initialization
• Extending the Class
• Override on Manual Submit

Override on Manual Submit

onSuccess(form) & onError(form)

These methods are called when the form validation is done.

They can return promises to wait on submit.

Define an object with onSuccess(form) or onError(form) Validation Hooks.

const hooks = {
  onSuccess(form) {
    alert('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
  },
  onError(form) {
    // get all form errors
    console.log('All form errors', form.errors());
    // invalidate the form with a custom error message
    form.invalidate('This is a generic error message!');
  },
};

They takes the form instance as parameter in input.

Then pass the Validation Hooks as first argument to the submit({ ... }) Action:

instance.submit({
  onSuccess: hooks.onSuccess,
  onError: hooks.onError,
})

or as second argument to the onSubmit(e, { ... }) Event Handler:

<button
  type="submit"
  onClick={e => instance.onSubmit(e, {
    onSuccess: hooks.onSuccess,
    onError: hooks.onError,
  })}
>Submit</button>

instance can be a Form or a Field

These methods can be called on Nested Fields as well for Sub-Form Submitting.