Form_validation_Reactjs

 import React,{useState,useEffect} from 'react';

export default function Form1() {

const initialvalues={username:'',userpass:''}

//  const [state,setState]=useState({name:'',pass:''})

const [state,setState]=useState(initialvalues)

const username=state.name;

const userpass=state.pass;

const [formError,setFormErrors]=useState({})

const [isSubmit, setisSubmit] = useState(false);

const handlechange=(e)=>{

//console.log(e.target);

const {name,value}=e.target;

//console.log(name);

//console.log(e.target.value);

setState({...state,[name]:value})    

}

const handleSubmit=(e)=>{

    e.preventDefault();

    validate(state);

    setisSubmit(true);

}

//after submit button if you want to console 

error

useEffect(() => {

    console.log(formError)

      }

    , [formError]);

 

 //   

const validate=(state)=>{

// console.log("hello"+state.username);

// console.log("hello"+state.userpass);

const errors={};

const regexUserName = /^[A-Za-z\\s]+$/;

/* Minimum eight characters, at least one letter

  and one number:

  */

const regexUserPass=/^(?=.*[A-Za-z])(?=.*\d)

[A-Za-z\d]{8,}$/;

if(!state.username){

    errors.username="*username is required";

    //console.log("username is required");

}

else if(!regexUserName.test(state.username)){

    errors.username="*username must be character"

}

if(!state.userpass){

    errors.userpass="*userpass is required";

}

else if(!regexUserPass.test(state.userpass)){

    errors.userpass=

    "Minimum eight characters, at least one letter and one number";

}

setFormErrors(errors);

//console.log(formError);

}

  return <div>

     

      <form onSubmit={handleSubmit}>

<label htmlFor="enter name">Name</label>

<input type="text" name="username" id="" 

placeholder="Enter Name"

value={username}

onChange={handlechange}

/>

<span>{formError.username}</span>

<br />

<label htmlFor="enter password">Password</label>

<input type="text" name="userpass" id=""

placeholder="enter password"

value={userpass}

onChange={handlechange}

/>

<span>{formError.userpass}</span>

<br />

<input type="submit" value="login" />

  </form>

  </div>;

}