Skip to main content

Submit and reset

Submit ans submit error​

With the onSubmit parameter​

You can listen to the form being submitted with the onSubmit parameter you can provide on both the useForm hook or the <Form> component:

0
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IFormValues, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { errors, formProps } = useForm({
    ...props,
    onSubmit: handleSubmit,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

Submit error with the onSubmitError parameter​

warning

This option only works when useNativeValidation is set to false.

You can get the form error using the onSubmitError parameter:

0
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IError, type IFormValues, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  function handleSubmitError(_e: FormEvent<HTMLFormElement>, errors: IError) {
    console.log(errors);
  }

  const { errors, formProps } = useForm({
    ...props,
    onSubmit: handleSubmit,
    onSubmitError: handleSubmitError,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}
info

Open the console to see the logs.

Using the onSubmit handler​

For the hook version you can also use the onSubmit handler if you prefer.

You can also provide a second parameter for the submit error callback (that again only works with non native validation) :

0
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IError, type IFormValues, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  function handleSubmitError(_e: FormEvent<HTMLFormElement>, errors: IError) {
    console.log(errors);
  }

  const { errors, formProps, onSubmit } = useForm(props);

  return (
    <form {...formProps} onSubmit={onSubmit(handleSubmit, handleSubmitError)}>
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

Reset​

With a button​

If you want to reset you form using a button just add a <button type="reset"> to your form :

0
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IFormValues, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { errors, formProps } = useForm({
    ...props,
    onSubmit: handleSubmit,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <div className="actions">
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  );
}

The reset action will clear all values and will reset all errors.

warning

For controlled component see the dedicated chapter.

Programmatically​

If you want to reset the form programmatically (for example when the form is submitted), then use the reset function.

You can get the reset function from the useForm hook, but it is also provided as the third parameter of your submit handler:

0
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IFormValues, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    reset();
    console.log(values);
  }

  const { errors, formProps, reset } = useForm({
    ...props,
    onSubmit: handleSubmit,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}
tip

You can also pass an object parameter to the reset function to programmatically reset the form to specific values.

Resetting to specific values​

If you want to reset your form to specific values you can use the defaultValues parameter to set some value initially on the form and then reset the form using those values again (see default values for more information).

But if you don't want those value initially, you can reset the form to some specific values with one of the following techniques.

tip

Even if you don't return anything from your onReset callbacks, it can still be useful to react to the reset event.

For example if you want to update the state of a controlled component (see controlled components for more information).

With the onReset parameter​

Return an object from the onReset function parameter:

0
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IFormValues, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleReset(_e: FormEvent<HTMLFormElement>, _values: IFormValues) {
    return { text: 'reset value' };
  }

  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { errors, formProps } = useForm({
    ...props,
    onReset: handleReset,
    onSubmit: handleSubmit,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <div className="actions">
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  );
}

With the onReset handler​

For the hook version you can also use the onReset handler if you prefer:

0
import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IFormValues, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleReset(_e: FormEvent<HTMLFormElement>, _values: IFormValues) {
    return { text: 'reset value' };
  }

  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { errors, formProps, onReset, onSubmit } = useForm(props);

  return (
    <form
      {...formProps}
      onReset={onReset(handleReset)}
      onSubmit={onSubmit(handleSubmit)}
    >
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <div className="actions">
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  );
}