Client-Side Form Validation & Error Handling

1. Validation Strategies: When to Tell the User?

Before we write any code, we need to decide when to show an error message. The timing significantly impacts user experience.

As the article explains, here's a quick summary:

• onChange: Validates on every keystroke. This can be overwhelming for users, as they see errors while they are still typing. It's best reserved for specific cases, like a password strength meter.
• onSubmit: Validates only when the user clicks "Submit." This is the bare minimum, but it's poor UX. The user fills out the entire form, submits, and only then discovers multiple errors they have to go back and fix.
• onBlur: Validates when a user "leaves" an input field (clicks or tabs away). This is often the sweet spot. It allows the user to finish typing in a field before seeing an error, providing timely but not intrusive feedback.

For most fields, a combination of onBlur for initial validation and onChange for re-validating an already-invalid field is a common and effective pattern.

2. The "Manual" Approach: HTML5 Attributes & React State

You can implement effective validation without any external libraries by combining built-in HTML5 validation attributes with a little bit of React state to control the user experience.

This approach leverages browser capabilities, which is efficient and a great way to understand the underlying mechanics.

Key Concepts from the Video:

• Validation Attributes: HTML inputs have built-in validation properties.
  • required: The field cannot be empty.
  • minLength/maxLength: Specifies the minimum and maximum number of characters.
  • type="email" or type="url": The browser validates the format.
  • pattern: Accepts a regular expression (regex) to test the input against. This is extremely powerful for custom rules (e.g., "password must contain a number").
• CSS Pseudo-classes: CSS can automatically style inputs based on their validation status.
  • :invalid: Styles the input when its value doesn't conform to its rules. You can use this to add a red border, for example.
  • input:invalid + span: You can use the adjacent sibling selector (+) to show an error message (<span>) that is placed right after an invalid input.
• Controlling Error Visibility with State: The main problem with just using :invalid is that errors show up immediately, even on an empty required field. The video's solution is brilliant:
  1. Add a focused property to each input's state, initialized to false.
  2. Use the onBlur event on the input to set its focused property to true.
  3. In your CSS, only show the error message and red border when the input is both :invalid and has a data-focused="true" attribute (which you set from your React state). This ensures errors only appear after the user has "touched" the field.

<input
  type="text"
  name="username"
  required
  minLength="4"
  maxLength="12"
  pattern="[a-z0-9]+"
  title="Username must be 4-12 characters and contain only lowercase letters and numbers."
/>

This manual approach is great, but as forms grow, managing all the error states, touched states, and complex validation logic can become cumbersome. This is why the industry has moved towards dedicated libraries.

3. The Professional Approach: react-hook-form & zod

For any non-trivial application, you'll want a more robust solution. React Hook Form is a library designed to make form handling in React performant and easy. We'll pair it with Zod, a schema validation library, to create a clean, powerful, and maintainable validation system. This combination is a common industry standard.

Why Use a Library?

First, let's understand the problem these libraries solve. As your forms get more complex, the manual approach leads to a lot of boilerplate code.

Implementing react-hook-form with Zod

This approach separates your validation logic (the "schema") from your component, a key principle in good software design.

1. Define a Schema with Zod: You create an object that defines the "shape" of your form data and the validation rules for each field. Zod has a fluent, chainable API that is very readable.
2. Connect to React Hook Form: You pass this schema to React Hook Form using a special "resolver".
3. Register Inputs: You use the register function from React Hook Form to connect your inputs.
4. Display Errors: The library gives you a simple errors object to easily display validation messages next to the correct fields.

This process is best understood by seeing it in action.

Let's summarize the code structure.

1. Install dependencies:

npm install react-hook-form @hookform/resolvers zod

2. Create your form component:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// 1. Define the schema with Zod
const schema = z.object({
  email: z.string().email({ message: 'Invalid email address' }),
  password: z.string().min(8, { message: 'Password must be at least 8 characters' }),
});

export function LoginForm() {
  // 2. Connect the schema to React Hook Form
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data) => {
    // This function only runs if validation passes
    console.log('Form data is valid:', data);
  };

  return (
    // The `handleSubmit` function from the library wraps your own submit handler
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Email</label>
        {/* 3. Register the input */}
        <input type="email" {...register('email')} />
        {/* 4. Display the error message */}
        {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
      </div>
      <div>
        <label>Password</label>
        <input type="password" {...register('password')} />
        {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}
      </div>
      <button type="submit">Log In</button>
    </form>
  );
}

Notice how much cleaner this is. The component isn't concerned with the validation logic, only with displaying the results. The rules themselves live separately in the Zod schema. This is incredibly scalable and maintainable.

Conclusion

You now have the tools to implement robust, user-friendly form validation in your React applications.

Key Takeaways:

• Validation Timing is Key: onBlur is generally the best strategy for user experience, preventing errors from appearing while the user is still typing.
• Native HTML5 validation (required, pattern, etc.) is a powerful first step, but requires careful state management in React to create a good UX.
• Schema-based validation is the modern standard. Libraries like Zod allow you to define all your validation rules in a single, clean, and reusable object.
• react-hook-form is the professional's choice for managing form state, submission, and validation. It integrates perfectly with Zod and removes vast amounts of boilerplate code from your components.
• The formState: { errors } object is your gateway to displaying contextual error messages to the user.

In our next lesson, we will shift gears slightly. We've focused heavily on component-level state (like in forms). Next, we'll explore the React Context API, a built-in React feature for managing global state that needs to be accessed by many components throughout your application, such as user authentication status or a theme preference.