Simplifying Form Handling with a Fresh Approach

A Fresh Approach to Forms

When it comes to handling forms in React, we’re often bogged down by the complexities of setting up state, deciding between controlled and uncontrolled variables, and dealing with onChange, onBlur, and onSubmit events. But what if we could simplify the process and take a step back to the traditional way of handling forms, reminiscent of languages like PHP?

A Unique Approach

This approach provides functions called action and loader, which enable server-side operations and access to form data. This means we no longer need to serve JavaScript to the frontend to submit a form, reducing the browser’s load and keeping things simple.

import { action, loader } from 'framework';

export const MyForm = () => {
  // Use action and loader functions here
};

The Custom Form Component

The custom Form component works identically to the native HTML <form> element, but with a twist. We don’t need to set up onChange, onSubmit, or onClick event handlers, nor do we need to set up state for our forms. Instead, we can access form data from the web’s formData() API.

<Form>
  <label>Name:</label>
  <input type="text" name="name" />
  <br>
  <label>Email:</label>
  <input type="email" name="email" />
  <br>
  <button type="submit">Submit</button>
</Form>

Setting Up a Form

So, what does a basic form look like? Let’s take a look:

import { Form, useActionData } from 'framework';

export const MyForm = () => {
  const actionData = useActionData();

  return (
    <Form>
      <label>Name:</label>
      <input type="text" name="name" />
      <br>
      <label>Email:</label>
      <input type="email" name="email" />
      <br>
      <button type="submit">Submit</button>
    </Form>
  );
};

Validating Forms

Validating forms is a crucial part of the process. We can set up custom validation logic for our form fields, checking if they’re empty or meet certain requirements. If they fail these checks, we return error messages.

import { Form, useActionData } from 'framework';

export const MyForm = () => {
  const actionData = useActionData();

  if (!actionData.name) {
    return <div>Name is required</div>;
  }

  if (!actionData.email) {
    return <div>Email is required</div>;
  }

  // Form is valid, proceed with submission
};

Taking it to the Next Level with Validated Forms

While custom validation works, it doesn’t fully cater to all possible form validation needs. That’s where validated forms come in. Validated forms provide a Form component and utilities used to validate forms, supporting various validation libraries like Yup and Zod.

import { ValidatedForm, useForm } from 'validated-form';

export const MyForm = () => {
  const { register, errors } = useForm();

  return (
    <ValidatedForm>
      <label>Name:</label>
      <input {...register('name')} />
      {errors.name && <div>{errors.name.message}</div>}
      <br>
      <label>Email:</label>
      <input {...register('email')} />
      {errors.email && <div>{errors.email.message}</div>}
      <br>
      <button type="submit">Submit</button>
    </ValidatedForm>
  );
};

With validated forms, we can create a custom Input component, a custom SubmitBtn component, and a validator that will use in the background to validate the form fields. Finally, we can put it all together to create a sign-up form that’s both user-friendly and secure.