Validation Hooks

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

---

On Form Initialization

onSuccess(form) & onError(form)

Define Validation Hooks via the hooks object in the Second Argument of the Form Constructor:

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

new Form({ ... }, { hooks });

---

Sub-Form Submission

onSuccess(fieldset) & onError(fieldset)

Nested fields can have their own Validation Hooks for sub-form patterns. Define hooks keyed by field path:

const submit = {
  onSuccess(fieldset) {
    alert(`${fieldset.path} is valid!`);
    console.log(`${fieldset.path} Values!`, fieldset.values());
  },
  onError(fieldset) {
    console.log(`All ${fieldset.path} errors`, fieldset.errors());
    fieldset.invalidate('This is a generic error message!');
  },
};

const hooks = {
  'members[]': submit,
};

new Form({
  fields: ['members[].firstname', 'members[].lastname'],
  hooks,
});

---

Legacy API — Version < 1.32

In older versions, the object was called onSubmit instead of hooks:

const onSubmit = {
  onSuccess(form) {
    console.log('Form Values!', form.values());
  },
  onError(form) {
    console.log('All form errors', form.errors());
  },
};

new Form({ ... }, { onSubmit });

For Sub-Form Submission:

const onSubmit = {
  'members[]': submit,
};

new Form({ ... }, { onSubmit });