[英]TypeError: validation is not a function in react.js
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当我点击提交按钮时,出现以下错误:TypeError: validation is not a function
22 | 22 | 23 |
23 | const handleSubmit = (e) => { 24 |
const handleSubmit = (e) => { 24 | e.preventDefault();
e.preventDefault();
25 |
25 | setErrors(validation(values));
设置错误(验证(值)); |
| ^ 26 |
^ 26 | setIsSubmitting(true);
setIsSubmitting(真); 27 |
27 | };
};
You are setting two parameters for the hook - a callback function and validation function, and you are only passing the validation function您正在为挂钩设置两个参数 - 回调 function 和验证 function,并且您仅通过验证 function
useForm(validation)
Please pass the callback function first and then that vaildation function请先传递回调 function,然后传递验证 function
Your useForm
receives two params where you only give it one in the callback您的
useForm
收到两个参数,您只在回调中给它一个参数
const useForm = (callback,validation)
As a result, it got error here:结果这里报错:
setErrors(validation(values));
Because you pass only callback
, not validation.因为您只传递
callback
,而不传递验证。 You need decalre callBack
and pass it into useForm
您需要 decalre
callBack
并将其传递给useForm
const callBack = () => {...};
useForm(callBack, validation);
I think your logic is somewhat not clear.我觉得你的逻辑有点不清楚。
const { hadleChange, values, handleSubmit, errors } = useForm(validation);
Whatever, you passed validation
as a callback
here.不管怎样,你在这里通过了
validation
作为callback
。
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});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.