Suggestion: Use Validation Box to simplify validations in React Hook Form

[euotiniel]

Hey everyone! 👋

Currently, when validating forms with React Hook Form, many developers use manual regex, making the code harder to read and maintain.

For example, in the code below, regex is used directly in register() to validate names and other fields:

import { useForm, SubmitHandler } from "react-hook-form";

interface IFormInput {
  firstName: string;
  lastName: string;
  age: number;
}

export default function App() {
  const { register, handleSubmit } = useForm<IFormInput>();
  const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

The issue here is that manually writing regex for names and other fields can be tedious and error-prone.

How can Validation Box help?

Validation Box provides built-in validation, allowing you to define rules more intuitively without needing regex. Additionally, it offers a first layer of security against attacks like SQL Injection by blocking malicious input.

For name validation, for example, these configurable attributes are available:

• minLength: minimum character length (default: 3).
• maxLength: maximum character length (default: 30).
• allowSpecialChars: allowed special characters (default: " '’\s"). Restricting this helps prevent injection attacks.
• bannedWords: list of forbidden words (default: []). This allows blocking input like "DROP DATABASE", "SELECT * FROM users", "admin", "root", etc., adding extra protection against common attacks.

💡 Integration with React Hook Form?

Even if developers prefer to stick with React Hook Form, it would be interesting to use Validation Box under the hood to provide more secure and flexible validation without manual regex.

What do you think about this idea? 🚀

Validation Box: https://github.com/euotiniel/validation-box