Form modes

All the following examples use simple validation - length of 6 characters or more. This gives you an option to play around with these examples.

This example uses react-bootstrap for styling purposes and some custom UI components for visual aspects.

`onSubmitUnlessError` mode (default)

The default mode - performant and convenient. Only hydrate and validate forms on submit and revalidate errors on every change by default. Suitable for most forms.

import React from "react";
import { Button, Stack } from "react-bootstrap";
import { useBrowserForm, ValidationError, ValidationSchema } from "react-browser-form";

// UI for documentation only
import { FormCheckbox, FormGroup, FormGroupTitle, FormTextarea, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "",
  commentTitle: "",
  commentBody: "",
  rememberMe: true,
};
type Form = typeof defaultValues;

function validateLength(stringField: string) {
  if (stringField.length < 6) throw new ValidationError("Value must be at least 6 characters long.");
}

const validationSchema: ValidationSchema<Form> = {
  required: { fields: ["name", "commentTitle", "commentBody", "rememberMe"] },

  validators: {
    name: validateLength,
    commentTitle: validateLength,
    commentBody: validateLength,
  },
};

export function ExampleModeOnSubmitUnlessError() {
  const [data, setData] = React.useState<Form>();

  const {
    formProps,
    names,
    errorData: { errors },
  } = useBrowserForm<Form>({
    name: "example-mode-onSubmitUnlessError",
    mode: "onSubmitUnlessError",
    defaultValues,
    validationSchema,
    onSubmit: setData,
  });

  return (
    <form {...formProps}>
      <FormGroupTitle>Leave a comment</FormGroupTitle>
      <FormGroup>
        <FormTextInput label="Your name" name={names.name} error={errors.name} />
        <FormTextInput label="Comment title" name={names.commentTitle} error={errors.commentTitle} />
      </FormGroup>
      <FormTextarea placeholder="What's on your mind?" name={names.commentBody} error={errors.commentBody} rows={3} />
      <FormCheckbox label="Remember me next time" name={names.rememberMe} error={errors.rememberMe} />

      <Stack direction="horizontal" className="justify-content-end">
        <Button type="reset" variant="outline-danger" className="me-1" size="sm">
          Clear
        </Button>
        <Button type="submit" size="sm">
          Post comment
        </Button>
      </Stack>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state

`onSubmit` mode

This mode is suitable for simpler forms, that do not require validation, feedback, etc.

import React from "react";
import { Button, Stack } from "react-bootstrap";
import { useBrowserForm, ValidationError, ValidationSchema } from "react-browser-form";

// UI for documentation only
import { FormCheckbox, FormGroup, FormGroupTitle, FormTextarea, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "",
  commentTitle: "",
  commentBody: "",
  rememberMe: true,
};
type Form = typeof defaultValues;

function validateLength(stringField: string) {
  if (stringField.length < 6) throw new ValidationError("Value must be at least 6 characters long.");
}

const validationSchema: ValidationSchema<Form> = {
  required: { fields: ["name", "commentTitle", "commentBody", "rememberMe"] },

  validators: {
    name: validateLength,
    commentTitle: validateLength,
    commentBody: validateLength,
  },
};

export function ExampleModeOnSubmit() {
  const [data, setData] = React.useState<Form>();

  const {
    formProps,
    names,
    errorData: { errors },
  } = useBrowserForm<Form>({
    name: "example-mode-onSubmit",
    mode: "onSubmit",
    defaultValues,
    validationSchema,
    onSubmit: setData,
  });

  return (
    <form {...formProps}>
      <FormGroupTitle>Leave a comment</FormGroupTitle>
      <FormGroup>
        <FormTextInput label="Your name" name={names.name} error={errors.name} />
        <FormTextInput label="Comment title" name={names.commentTitle} error={errors.commentTitle} />
      </FormGroup>
      <FormTextarea placeholder="What's on your mind?" name={names.commentBody} error={errors.commentBody} rows={3} />
      <FormCheckbox label="Remember me next time" name={names.rememberMe} error={errors.rememberMe} />

      <Stack direction="horizontal" className="justify-content-end">
        <Button type="reset" variant="outline-danger" className="me-1" size="sm">
          Clear
        </Button>
        <Button type="submit" size="sm">
          Post comment
        </Button>
      </Stack>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state

`onBlurUnlessError` mode

In some cases, you might want to hydrate and propagate data changes more often than on submit, but still do not need live fields or onChange mode to save system resources for your users. This is where blur modes can be very handy. For checkboxes, selects and other input types that lose focus less transparently, you might want to consider live fields.

import React from "react";
import { Button, Stack } from "react-bootstrap";
import { useBrowserForm, ValidationError, ValidationSchema } from "react-browser-form";

// UI for documentation only
import { FormCheckbox, FormGroup, FormGroupTitle, FormTextarea, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "",
  commentTitle: "",
  commentBody: "",
  rememberMe: true,
};
type Form = typeof defaultValues;

function validateLength(stringField: string) {
  if (stringField.length < 6) throw new ValidationError("Value must be at least 6 characters long.");
}

const validationSchema: ValidationSchema<Form> = {
  required: { fields: ["name", "commentTitle", "commentBody", "rememberMe"] },

  validators: {
    name: validateLength,
    commentTitle: validateLength,
    commentBody: validateLength,
  },
};

export function ExampleModeOnBlurUnlessError() {
  const [data, setData] = React.useState<Form>();

  const {
    formProps,
    names,
    errorData: { errors },
  } = useBrowserForm<Form>({
    name: "example-mode-onBlurUnlessError",
    mode: "onBlurUnlessError",
    defaultValues,
    validationSchema,
    onSubmit: setData,
    onChange: setData,
  });

  return (
    <form {...formProps}>
      <FormGroupTitle>Leave a comment</FormGroupTitle>
      <FormGroup>
        <FormTextInput label="Your name" name={names.name} error={errors.name} />
        <FormTextInput label="Comment title" name={names.commentTitle} error={errors.commentTitle} />
      </FormGroup>
      <FormTextarea placeholder="What's on your mind?" name={names.commentBody} error={errors.commentBody} rows={3} />
      <FormCheckbox label="Remember me next time" name={names.rememberMe} error={errors.rememberMe} />

      <Stack direction="horizontal" className="justify-content-end">
        <Button type="reset" variant="outline-danger" className="me-1" size="sm">
          Clear
        </Button>
        <Button type="submit" size="sm">
          Post comment
        </Button>
      </Stack>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state

`onBlur` mode

A more simplified blur mode for very basic forms.

import React from "react";
import { Button, Stack } from "react-bootstrap";
import { useBrowserForm, ValidationError, ValidationSchema } from "react-browser-form";

// UI for documentation only
import { FormCheckbox, FormGroup, FormGroupTitle, FormTextarea, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "",
  commentTitle: "",
  commentBody: "",
  rememberMe: true,
};
type Form = typeof defaultValues;

function validateLength(stringField: string) {
  if (stringField.length < 6) throw new ValidationError("Value must be at least 6 characters long.");
}

const validationSchema: ValidationSchema<Form> = {
  required: { fields: ["name", "commentTitle", "commentBody", "rememberMe"] },

  validators: {
    name: validateLength,
    commentTitle: validateLength,
    commentBody: validateLength,
  },
};

export function ExampleModeOnBlur() {
  const [data, setData] = React.useState<Form>();

  const {
    formProps,
    names,
    errorData: { errors },
  } = useBrowserForm<Form>({
    name: "example-mode-onBlur",
    mode: "onBlur",
    defaultValues,
    validationSchema,
    onSubmit: setData,
    onChange: setData,
  });

  return (
    <form {...formProps}>
      <FormGroupTitle>Leave a comment</FormGroupTitle>
      <FormGroup>
        <FormTextInput label="Your name" name={names.name} error={errors.name} />
        <FormTextInput label="Comment title" name={names.commentTitle} error={errors.commentTitle} />
      </FormGroup>
      <FormTextarea placeholder="What's on your mind?" name={names.commentBody} error={errors.commentBody} rows={3} />
      <FormCheckbox label="Remember me next time" name={names.rememberMe} error={errors.rememberMe} />

      <Stack direction="horizontal" className="justify-content-end">
        <Button type="reset" variant="outline-danger" className="me-1" size="sm">
          Clear
        </Button>
        <Button type="submit" size="sm">
          Post comment
        </Button>
      </Stack>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state

`onChange` mode

A more simplified blur mode for very basic forms.

Prefer using live fields over onChange mode due to performance concerns. The onChange mode should only be used on small forms with no validation / transformation.

import React from "react";
import { Button, Stack } from "react-bootstrap";
import { useBrowserForm, ValidationError, ValidationSchema } from "react-browser-form";

// UI for documentation only
import { FormCheckbox, FormGroup, FormGroupTitle, FormTextarea, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "",
  commentTitle: "",
  commentBody: "",
  rememberMe: true,
};
type Form = typeof defaultValues;

function validateLength(stringField: string) {
  if (stringField.length < 6) throw new ValidationError("Value must be at least 6 characters long.");
}

const validationSchema: ValidationSchema<Form> = {
  required: { fields: ["name", "commentTitle", "commentBody", "rememberMe"] },

  validators: {
    name: validateLength,
    commentTitle: validateLength,
    commentBody: validateLength,
  },
};

export function ExampleModeOnChange() {
  const [data, setData] = React.useState<Form>();

  const {
    formProps,
    names,
    errorData: { errors },
  } = useBrowserForm<Form>({
    name: "example-mode-onChange",
    mode: "onChange",
    defaultValues,
    validationSchema,
    onSubmit: setData,
    onChange: setData,
  });

  return (
    <form {...formProps}>
      <FormGroupTitle>Leave a comment</FormGroupTitle>
      <FormGroup>
        <FormTextInput label="Your name" name={names.name} error={errors.name} />
        <FormTextInput label="Comment title" name={names.commentTitle} error={errors.commentTitle} />
      </FormGroup>
      <FormTextarea placeholder="What's on your mind?" name={names.commentBody} error={errors.commentBody} rows={3} />
      <FormCheckbox label="Remember me next time" name={names.rememberMe} error={errors.rememberMe} />

      <Stack direction="horizontal" className="justify-content-end">
        <Button type="reset" variant="outline-danger" className="me-1" size="sm">
          Clear
        </Button>
        <Button type="submit" size="sm">
          Post comment
        </Button>
      </Stack>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state

Form modes

onSubmitUnlessError mode (default)

Leave a comment

onSubmit mode

Leave a comment

onBlurUnlessError mode

Leave a comment

onBlur mode

Leave a comment

onChange mode

Leave a comment

`onSubmitUnlessError` mode (default)

`onSubmit` mode

`onBlurUnlessError` mode

`onBlur` mode

`onChange` mode