DEV Community

codpro sui
codpro sui

Posted on

codpro-validator react form validator library

Hi coders 👋,
I recently built my own form validation library for React instead of using heavy libraries. I wanted something lightweight, flexible, and easy to control — so I decided to build it from scratch.

Why Not Use Existing Libraries?

While working with forms in React, I explored popular solutions. They are powerful, but I faced a few issues:
Too much boilerplate
Large bundle size
Complex configuration for simple forms
Limited flexibility for custom validation logic

**

Install first package 📦 from npm

**

npm install codpro-validator
Enter fullscreen mode Exit fullscreen mode

Uses

const {
  values,
  errors,
  handleChange,
  handleSubmit,
  isDirty,
  isSubmitting
} = useValidator({
   name:{
 rules:[min(6,message)],
disabled: true // false
},{mode:"onChange"} //while typinge check err // onSubmit, onBlur when leave the input box
});
Enter fullscreen mode Exit fullscreen mode

register

<form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      {errors.email && <p>{errors.email}</p>}

      <input type="password" {...register("password")} placeholder="Password" />
      {errors.password && <p>{errors.password}</p>}

      <input type="password" {...register("confirmPassword")} placeholder="Confirm Password" />
      {errors.confirmPassword && <p>{errors.confirmPassword}</p>}

      <button disabled={!isDirty || isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
    </form>
Enter fullscreen mode Exit fullscreen mode

Note:
Suppose if you want to define initial value you can use defaultValue? Of react attribute.

Lightweight library, easy to read, easy to write ✍️, performance better, high security checking,
Must define mode:?

Top comments (0)