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:

1. 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)}>
   
   

2. Submit is a function. It will be called like this:

   <button type="submit" onClick={()=>Submit()}>Submit