TypeError: validation is not a function in react.js

Question

i'm trying to validate my form but always get the same error, this the code of the form:

import React from "react";
import zxcvbn from "zxcvbn";
import logo from "../images/milinus.png";
import useForm from "./useForm";

function Signup() {
  //function for validation of the submited data from the form
  const validation = (values) => {
    let errors = {};

    //name validion
    if (!values.name.trim()) {
      errors.name = "Name is required";
    }

    //last name validtion
    if (!values.lastname.trim()) {
      errors.lastname = "Username is required";
    }

    //email validtion
    if (!values.email.trim()) {
      errors.email = "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      errors.email = "Email is invalid";
    }

    //password validtion
    if (!values.pass.trim()) {
      errors.pass = "pass is required";
    } else if (values.pass < 8) {
      errors.pass = "PassWord need to be 8 characters or more";
    }

    //pass_conf
    if (!values.pass_conf.trim()) {
      errors.pass_conf = "pass_conf is required";
    } else if (values.pass_conf == !values.pass) {
      errors.pass_conf = "pass_conf is not match the Password";
    }

    return errors;
  }

  //custom hook for the form
  const { hadleChange, values, handleSubmit, errors } = useForm(validation);

  //function that conforme and indicaite the score of the pass word
  const confirm_ps = (e) => {
    const weak = document.querySelector(".weak");
    const muduim = document.querySelector(".muduim");
    const strong = document.querySelector(".strong");
    const indicater = document.querySelector(".indicater");
    let test = zxcvbn(e.target.value);

    weak.setAttribute("style", "background-color:white");
    muduim.setAttribute("style", "background-color:white");
    strong.setAttribute("style", "background-color:white");
    indicater.innerHTML = "";

    console.log(test.score);

    if (test.score === 0 || test.score === 1) {
      if (e.target.value == !null) {
        weak.setAttribute("style", "background-color:white");
        muduim.setAttribute("style", "background-color:white");
        strong.setAttribute("style", "background-color:white");
        indicater.innerHTML = "";
      }
      console.log(e.target.value);
      weak.setAttribute("style", "background-color:red");
      indicater.innerHTML = "Weak";
    } else if (test.score === 2 || test.score === 3) {
      weak.setAttribute("style", "background-color:yellow");
      muduim.setAttribute("style", "background-color:yellow");
      indicater.innerHTML = "Meduim";
    } else if (test.score === 4) {
      weak.setAttribute("style", "background-color:green");
      muduim.setAttribute("style", "background-color:green");
      strong.setAttribute("style", "background-color:green");
      indicater.innerHTML = "Strong";
    }
  };

  return (
    <div className="signup">
      <div className="logo">
        <img src={logo} alt="logo" />
        <p>CREER UN COMPTE</p>
      </div>
      <div className="inputs">
        <form className="form" onSubmit={handleSubmit}>
          <div className="form-input">
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Nom"
              value={values.name}
              onChange={hadleChange}
            />
            <p className="errorname">{errors.name}</p>
          </div>

          <div className="form-input ">
            <input
              type="text"
              name="lastname"
              id="lastname"
              placeholder="Prenom"
              value={values.lastname}
              onChange={hadleChange}
            />
            <p className="errorlastname"></p>
          </div>

          <div className="form-input">
            <input
              type="text"
              id="username"
              name="username"
              placeholder="Username"
              value={values.username}
              onChange={hadleChange}
            />
            <p className="errorusername"></p>
          </div>

          <div className="form-input">
            <input
              type="text"
              id="email"
              name="email"
              placeholder="Email"
              value={values.email}
              onChange={hadleChange}
            />
            <p className="erroremail"></p>
          </div>

          <div className="form-input">
            <input
              type="password"
              id="pass"
              name="pass"
              placeholder="Mote de pass"
              onChange={confirm_ps}
            />
            <p className="errorpassword"></p>
          </div>

          <div className="form-input">
            <input
              type="password"
              id="pass_conf"
              className="conform"
              name="pass_conf"
              placeholder="conform le mote de pass"
              value={values.pass_conf}
              onChange={hadleChange}
            />
            <p className="errorpass_conf"></p>
          </div>

          <div className="progress">
            <span className="weak"></span>
            <span className="muduim"></span>
            <span className="strong"></span>
          </div>
          <div className="indicater"></div>
          <div className="wornings">
            <ul>
              <li>Letters majuscule et minuscule</li>
              <li>Plus de 8 characters</li>
              <li>Contiens au moin un chiffers ou symbol</li>
            </ul>
          </div>
          <button type="submite" className="signup-btn">
            S'INSCRIRE AND ACCEPTER
          </button>
        </form>
      </div>
    </div>
  );
}

export default Signup;

and this the code for the custom hook:

import { useState, useEffect } from "react";

const useForm = (callback,validation) => {
  const { values, setValues } = useState({
    name: "",
    lastname: "",
    username: "",
    email: "",
    pass: "",
    pass_conf: "",
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validation(values));
    setIsSubmitting(true);
  };

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

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

export default useForm;

when i click on the submit button i get this errors: TypeError: validation is not a function

22 | 23 | const handleSubmit = (e) => { 24 | e.preventDefault();

25 | setErrors(validation(values)); | ^ 26 | setIsSubmitting(true); 27 | };

Answer 1

I think your logic is somewhat not clear.

const { hadleChange, values, handleSubmit, errors } = useForm(validation);

Whatever, you passed validation as a callback here.

How about changing it as follow.

const useForm = (validation, callback) => {

To use the callback, you can define the callback here.

 const { hadleChange, values, handleSubmit, errors } = useForm(validation, function() {... callback here});

Answer 2

Because you pass only callback, not validation. You need decalre callBack and pass it into useForm

const callBack = () => {...};
useForm(callBack, validation);

Answer 3

You are setting two parameters for the hook - a callback function and validation function, and you are only passing the validation function

useForm(validation)

Please pass the callback function first and then that vaildation function

Answer 4

Your useForm receives two params where you only give it one in the callback

const useForm = (callback,validation) 

As a result, it got error here:

setErrors(validation(values));