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 | };

Nitsan Cohen · Accepted Answer · 2021-08-22 11:31:38Z

1

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

answered Aug 22, 2021 at 11:31

Nitsan Cohen

7114 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viet · Accepted Answer · 2021-08-22 11:33:01Z

0

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

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

answered Aug 22, 2021 at 11:33

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Comments

Ryan Le · Accepted Answer · 2021-08-22 11:31:18Z

0

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));

answered Aug 22, 2021 at 11:31

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

Comments

Chuck · Accepted Answer · 2021-08-22 11:35:55Z

0

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});

answered Aug 22, 2021 at 11:35

Chuck

8147 silver badges19 bronze badges

Collectives™ on Stack Overflow

TypeError: validation is not a function in react.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related