React custom hook for validation not working correctly – Javascript

So this can definitely be solved using refs and modifying the validate function a bit.

While this can be done by using a single validate function, do remember it is necessary to pass to the function what field values it should be validating. Without that it would not be aware of which values to check and it would be checking for all the values.

This is how I would modify the validate function:

const errMap = {
  emailAddress: "Email address is required",
  password: "Password is required",

  fName: "first name is required",
  lName: "last name is required"
};

function validate(values, namesToCheck) {
  let errors = {};

  for (let i = 0; i < namesToCheck.length; i++) {
    if (!values[namesToCheck[i]]) {
      errors[namesToCheck[i]] = errMap[namesToCheck[i]];
    }
  }
  return errors;
}

errMap is just an easy config object to tell what each field value’s error would look like. The key is the name of the field and the value is the error message.

Since our solution need to be extensible enough to the situation when not all fields in a single form need to be validated, the hook should also change. It needs to allow passing only the fields which need to be checked.

const useForm = (callback, validate, inputsToCheck) => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [errors]);

  const handleSubmit = (event) => {
    if (event) event.preventDefault();

    let namesToCheck = inputsToCheck.map(({ current: { name } = {} }) => name);

    setErrors(validate(values, namesToCheck));
    setIsSubmitting(true);
  };

  const handleChange = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      [event.target.name]: event.target.value
    }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
    errors
  };
};

There are two changes:

1. A new param has been added which contains all the refs of the inputs to check.
2. handleSubmit is modified to extract names that need to pass to validate.

Finally, passing the correct refs to the hook will complete the solution.

const Form2 = () => {
  const btn2Click = () => {
    console.log("form2", values);
  };
  const fnameRef = useRef();
  const lnameRef = useRef();

  const { values, errors, handleChange, handleSubmit } = useForm(
    btn2Click,
    validate,
    [fnameRef, lnameRef]
  );
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="row">
          <div className="input-group">
            <label>First name</label>
            <input
              ref={fnameRef}
              type="text"
              className={`${errors.fName && "input-error"}`}
              name="fName"
              id="fName"
              onChange={handleChange}
              value={values.fName || ""}
            />
            <p className="error-text">{errors.fName}</p>
          </div>

          <div className="input-group">
            <label>last name</label>
            <input
              ref={lnameRef}
              type="text"
              className={`${errors.lName && "input-error"}`}
              name="lName"
              id="lName"
              onChange={handleChange}
              value={values.lName || ""}
            />
            <p className="error-text">{errors.lName}</p>
          </div>
        </div>
        <button type="submit" className="btn">
          Click 2
        </button>
      </form>
    </div>
  );
};

codesandbox link

PS:
I do not see any problem in creating two validate functions. Both can reside in the same file too. And then you can pass the correct one when invoking your hook. With the individual validate functions you need not pass the list of inputs which need to validated as your individual validate function would be catered to your form fields. I would also like to suggest that your individual validate methods should reside close to your forms. Form1 with Validate1 (in a separate file if needed).