Basic usage

Define your form, including its fields, and their validation rules in an object like the one below, and pass this to the ChangesetWebform component as the formSchema property, and that's it! The form will be rendered and all validation behaviours will work without any further template code.

import ChangesetWebform from 'react-changeset-webforms/src/components/ChangesetWebform.jsx';

const formSchema = {
  formSettings: {
    formName: 'login',
    submitButtonText: 'Log in',
    hideLabels: true,
    clearFormAfterSubmit: true,
  },
  fields: [
    {
      fieldId: 'email',
      fieldLabel: 'Email',
      fieldType: 'input',
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
        {
          validationMethod: 'validateFormat',
          arguments: { type: 'email' },
        },
      ],
      inputType: 'text',
      class: 'email',
    },
    {
      fieldId: 'password',
      fieldLabel: 'Password',
      fieldType: 'input',
      hideLabel: true,
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
      ],
      inputType: 'password',
      class: 'password',
    },
  ],
};

function submit(_data, _changesetWebform) {
  // Action that runs when the user clicks submit.
  return;
}

function submitSuccess(_response, _changesetWebform) {
  // Action that runs after a success response from the submit action above.
  alert('Success!');
}

function submitError(_error, _changesetWebform) {
  // Action that runs after an error response from the submit action above.
  alert('Error!');
}

export default function LoginForm() {
  return (
    <ChangesetWebform
      formSchema={formSchema}
      submitData={submit}
      submitSuccess={submitSuccess}
      submitError={submitError}
    />
  );
}

Actions

You can pass actions to a instance of a ChangesetWebform component, to define behaviours which are individual to a particulary instance of a form. The most obvious example would be the action that should run when the form is submitted, in many cases to submit the data from the form to the server.

The above example also includes a submitSuccess and submitError which will run when the submit action is resolved.

See Action handling for more details.

Form settings

Every formSchema has formSettings object which defines options for the form as a whole.

Note that formName is required and no two forms rendered on the same page should have the same name.

In the example above, the following default options are overriden:

submitButtonText
hideLabels
clearFormAfterSubmit

See Form settings for more details.