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.
return (
{errors.isNameError &&
Name must be at least 4 characters long and only contain letters and spaces
}
{errors.isEmailError && Email must be a valid email address}
{errors.isEmployeeIdError && Employee ID must be exactly 6 digits}
{errors.isDateError && Joining Date cannot be in the future}
Submit
);
}
export default EmployeeValidationForm;
Cookie support is required to access HackerRank
Seems like cookies are disabled on this browser, please enable them to open this website
Employee Validation
You are viewing a single comment's thread. Return to all comments →
import React, { useEffect, useState } from "react";
function EmployeeValidationForm() { const [form, setForm] = useState({ name: "", email: "", employeeId: "", joiningDate: "" }) const [errors, setErrors] = useState({ isNameError: true, isEmailError: true, isEmployeeIdError: true, isDateError: true }); const [isButtonDisabled, setIsButtonDisabled] = useState(false); const [touched, setTouched] = useState({ name: false, email: false, employeeId: false, joiningDate: false });
useEffect(() => { if (Object.values(form).some(val => val === "" || val === null || val === undefined)) { setIsButtonDisabled(true) } else if (Object.values(errors).some(error => error === true)) { setIsButtonDisabled(true) } else { setIsButtonDisabled(false) } }, [form, errors])
const handleOnChange = (e) => { setForm({ ...form, [e.target.name]: e.target.value })
}
const handleOnSubmit = () => { setForm({ name: "", email: "", employeeId: "", joiningDate: "" }) setErrors({ isNameError: true, isEmailError: true, isEmployeeIdError: true, isDateError: true }) }
const handleBlur = (e) => { setTouched({ ...touched, [e.target.name]: true }); };
return ( {errors.isNameError && Name must be at least 4 characters long and only contain letters and spaces
} {errors.isEmailError && Email must be a valid email address} {errors.isEmployeeIdError && Employee ID must be exactly 6 digits} {errors.isDateError && Joining Date cannot be in the future} Submit ); }export default EmployeeValidationForm;