I am trying to create form validation, using react hooks and I'm getting errors that cant read properly of includes. Using Class-Components of React works fine, but in functional components, it is throwing an Error.
I am trying to do Validation-Check on the Data entred by End-User in the Form. Here is my code:
import React,{useState} from 'react';
export default function Main(){
const [name, setname]= useState()
const [email, setemail]= useState()
const [password, setpassword]= useState()
const [check, setcheck]= useState()
const [emailerror, setemailerror]= useState()
const [passerror, setpasserror]= useState()
function getdata(e){
e.preventDefault()
}
function valid(){
if(!email.includes("@") && password.length<5){
setemailerror("Email not contain @") && setpasserror("Password length is less than 5")
}
else if (!email.includes("@")){
setemailerror("Email not contain @")
}
else if (password.length<5){
setpasserror("password length is less than 5")
}
else{
return true
}
}
function Submit(){
setemailerror("")
setpasserror("")
if(valid()){
alert("Hurry!! Form submitted")
}
}
return(
<div>
<form onSubmit={getdata}>
<span>Full Name: </span><input name= "userName" type="text" required onChange={(e)=>setname(e.target.value)}></input><br/><br/>
<span>Email: </span><input name= "Email" type="text" required onChange={(e)=>setemail(e.target.value)}></input><br /><br/>
<p>{emailerror}</p>
<span>Password: </span><input name= "Password" type="password" required onChange={(e)=>setpassword(e.target.value)}></input><br/><br />
<p>{passerror}</p>
<span>select option: </span><select>
<option>Man 1</option>
<option>Man 2</option>
<option>Man 3</option>
<option>Man 4</option>
</select><br /><br />
<span>T&c</span><input type="checkbox" onChange={(e)=>setcheck(e.target.checked)}></input><br /><br />
<button type="submit" onClick={Submit()}>Submit</button>
</form>
</div>
)
}
CodePudding user response:
First of all change your hooks initialization value, to empty string:
const [name, setname]= useState("")
const [email, setemail]= useState("")
const [password, setpassword]= useState("")
const [check, setcheck]= useState("")
const [emailerror, setemailerror]= useState("")
const [passerror, setpasserror]= useState("")
Second move your "valid" function call, on top :
if(valid()){
alert("Hurry!! Form submitted")
}
setemailerror("");
setpasserror("");
Third, pass the function name insted of calling it (remove parentheses):
<button type="submit" onClick={Submit}>Submit</button>
And then report the result in the comments
CodePudding user response:
The solution to the problem is:
Provide the value in input tag like
value={email}
Email: <input name= "Email" type="text" value={email} required onChange={(e)=>setemail(e.target.value)}>
Password: <input name= "Password" value={password} type="password" required onChange={(e)=>setpassword(e.target.value)}>Submit is a function. It will be called like this:
<button type="submit" onClick={()=>Submit()}>Submit