We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Forms
  4. Employee Validation
  5. Discussions

Employee Validation

  • achennakeshavar1
     + 1 comment

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

    function EmployeeValidationForm() { const [user, setUser] = useState({name:"",email:"",employeeId:"",joiningDate:""}); const [error, setError] = useState({name:"",email:"",employeeId:"",joiningDate:""}); const [isFormValid, setIsFormValid] = useState(true);

    useEffect(()=>{ if(validation()){ setIsFormValid(false); } },[user]);

    const validation =()=>{ let isValid=true; let newError = {name:"",email:"",employeeId:"",joiningDate:""};

    if(!user.name.trim() || user.name.trim().length < 4){ newError.name="Name must be at least 4 characters long and only contain letters and spaces"; isValid=false; } const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+Undefined control sequence \d/; if(!empIdRegex.test(user.employeeId)){ newError.employeeId = "Employee ID must be exactly 6 digits" isValid=false; } if(!user.joiningDate.trim() || user.joiningDate > "2024-12-31"){ newError.joiningDate = "Joining Date cannot be in the future" isValid=false; } setError(newError); return isValid; }

    const handleChange=(e)=>{ e.preventDefault(); const {name, value}=e.target; setUser((prev)=>({ ...prev, }));

    };

    const handleSubmit =()=>{ if(validation()){ setUser({name:"",email:"",employeeId:"",joiningDate:""}); setError({name:"",email:"",employeeId:"",joiningDate:""}); setIsFormValid(false); }else{ console.log("Validation Failed."); } }; return ( {error.name && {error.name}

    } {error.email && {error.email}

    } {error.employeeId && {error.employeeId}

    } {error.joiningDate && {error.joiningDate}

    } Submit ); }

    export default EmployeeValidationForm;