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

Sort by

recency

|

55 Discussions

|

  • arpittiwari_in
     + 0 comments

    There are some issues with the test cases,

    import React, { useState } from "react";

function EmployeeValidationForm() {
  const validators = {
    name: (val) =>
      val.length >= 4 && /^[A-Za-z\s]+$/.test(val)
        ? false
        : true,

    email: (val) =>
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)
        ? false
        : true,

    employeeId: (val) =>
      /^[0-9]{6}$/.test(val)
        ? false
        : true,

    joiningDate: (val) => {
      if (!val) return "Joining Date is required";
      const dateOfJoining = new Date(val);
      const today = new Date("2025-04-11"); // keep fixed for test consistency
      return today > dateOfJoining
        ? false
        : true
    },
  };

  const [form, setForm] = useState({
    name: "",
    email: "",
    employeeId: "",
    joiningDate: "",
  });
  const [errors, setErrors] = useState({
    name: validators.name(""),
    email: validators.email(""),
    employeeId: validators.employeeId(""),
    joiningDate: validators.joiningDate(""),
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
    setErrors((prev) => ({ ...prev, [name]: validators[name](value) }));
  };

  const handleSubmit = () => {
    setForm({ name: "", email: "", employeeId: "", joiningDate: "" });
    setErrors({
      name: validators.name(""),
      email: validators.email(""),
      employeeId: validators.employeeId(""),
      joiningDate: validators.joiningDate(""),
    });
  };

  const hasErrors = Object.values(errors).some((err) => err);

  return (
    <div className="layout-column align-items-center mt-20 ">
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-name">
        <input
          className="w-100"
          type="text"
          name="name"
          value={form.name}
          placeholder="Name"
          data-testid="input-name-test"
          onChange={handleChange}
        />
        {errors.name && (<p className="error mt-2">
          Name must be at least 4 characters long and only contain letters and spaces
        </p>)}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-email">
        <input
          className="w-100"
          type="text"
          name="email"
          value={form.email}
          placeholder="Email"
          onChange={handleChange}
        />
       {errors.email && (<p className="error mt-2">Email must be a valid email address</p>)}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-employee-id">
        <input
          className="w-100"
          type="text"
          name="employeeId"
          value={form.employeeId}
          placeholder="Employee ID"
          onChange={handleChange}
        />
        {errors.employeeId && (<p className="error mt-2">Employee ID must be exactly 6 digits</p>)}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-joining-date">
        <input
          className="w-100"
          type="date"
          name="joiningDate"
          value={form.joiningDate}
          placeholder="Joining Date"
          onChange={handleChange}
        />
        {errors.joiningDate && (<p className="error mt-2">Joining Date cannot be in the future</p>)}
      </div>
      <button data-testid="submit-btn" type="submit" 
        disabled={hasErrors}
        onClick={handleSubmit}
      >
        Submit
      </button>
    </div>
  );
}

export default EmployeeValidationForm;

  • pkumar143_91221
     + 0 comments

    There are some issues with the test cases, I modified the today date to pass the test cases. please get the test cases updated for the task:

    import React from "react";
import "../my.css"

function EmployeeValidationForm() {
  const [formData, setFormData] = React.useState({
    name: "",
    email: "",
    employeeId: "",
    joiningDate: ""
  });
  const [errors, setErrors] = React.useState({
    name: true,
    email: true,
    employeeId: true,
    joiningDate: true
  });

  const handleName = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }))
    if (!(/^[A-Za-z ]{4,}$/.test(value.trim()))) {
      setErrors((prev) => ({ ...prev, ...{ name: true } }));
    } else {
      setErrors((prev) => ({ ...prev, ...{ name: false } }));
    }
  }

  const handleEmail = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }))
    if (!(/^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{3,}$/.test(value))) {
      setErrors((prev) => ({ ...prev, ...{ email: true } }));
    } else {
      setErrors((prev) => ({ ...prev, ...{ email: false } }));
    }
  }

  const handleEmp = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }))
    if (!(/^\d{6}$/.test(value))) {
      setErrors((prev) => ({ ...prev, ...{ employeeId: true } }));
    } else {
      setErrors((prev) => ({ ...prev, ...{ employeeId: false } }));
    }
  }

  const handleDate = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }))
    const today = new Date("2025-04-11");
    if (new Date(value) > today) {
      setErrors((prev) => ({ ...prev, ...{ joiningDate: true } }));
    } else {
      setErrors((prev) => ({ ...prev, ...{ joiningDate: false } }));
      
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormData({
      name: "",
      email: "",
      employeeId: "",
      joiningDate: ""
    });
    setErrors({
      name: true,
      email: true,
      employeeId: true,
      joiningDate: true
    })
  }



  return (
    <div className="layout-column align-items-center mt-20 ">
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-name">
        <input
          className="w-100"
          type="text"
          name="name"
          value={formData.name}
          onChange={handleName}
          placeholder="Name"
          data-testid="input-name-test"
        />
        {errors['name'] ? <p className="error mt-2">Name must be at least 4 characters long and only contain letters and spaces</p> : ""}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-email">
        <input
          className="w-100"
          type="text"
          name="email"
          value={formData.email}
          onChange={handleEmail}
          placeholder="Email"
        />
        {errors['email'] && <p className="error mt-2">Email must be a valid email address</p>}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-employee-id">
        <input
          className="w-100"
          type="text"
          name="employeeId"
          value={formData.employeeId}
          onChange={handleEmp}
          placeholder="Employee ID"
        />
        {errors['employeeId'] && <p className="error mt-2">Employee ID must be exactly 6 digits</p>}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-joining-date">
        <input
          className="w-100"
          type="date"
          name="joiningDate"
          value={formData.joiningDate}
          onChange={handleDate}
          placeholder="Joining Date"
        />
        {errors['joiningDate'] && <p className="error mt-2">Joining Date cannot be in the future</p>}
      </div>
      <button disabled={errors['name'] || errors['email'] || errors['employeeId'] || errors['joiningDate']} onClick={handleSubmit} data-testid="submit-btn" type="submit">
        Submit
      </button>
    </div>
  );
}

export default EmployeeValidationForm;

  • Priyam1998
     + 0 comments

    There are some error in the test cases for date. Until somebody from HackerRank fix it use the below code for your purpose. All test cases passed ✅

    import React, { useState } from "react";

function EmployeeValidationForm() {
  const [data, setData] = useState({
    "name": "",
    "email": "",
    "employeeId": "",
    "joiningDate": ""
  })
  const [error, setError] = useState({
    "name": true,
    "email": true,
    "employeeId": true,
    "joiningDate": true,
  })
  const handleChange = (e) => {
    let value = e.target.value;
    setData(prev => {
      return {
        ...prev, [e.target.name]: value,
      }
    })
    setError(prev => {
      switch (e.target.name) {
        case "name":
          return {
            ...prev,
            "name": !(value.length >= 4 && /^[a-zA-Z ]+$/.test(value)),
          }
        case "email":
          return {
            ...prev,
            "email": !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
          }
        case "employeeId":
          return {
            ...prev,
            "employeeId": !/^[0-9]{6}$/.test(value),
          }
        case "joiningDate":
          const today = new Date("2025-04-11");
          const isValid = new Date(value) <= today;
          return {
            ...prev,
            joiningDate: !isValid,
          };
        default:
          return prev
      }
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setData({
      "name": "",
      "email": "",
      "employeeId": "",
      "joiningDate": "",
    });
    setError({
      "name": true,
      "email": true,
      "employeeId": true,
      "joiningDate": true,
    });
  }
  return (
    <form className="layout-column align-items-center mt-20" onSubmit={handleSubmit}>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-name">
        <input
          className="w-100"
          type="text"
          name="name"
          value={data.name}
          placeholder="Name"
          data-testid="input-name-test"
          onChange={handleChange}
        />
        {error.name && <p className="error mt-2">
          Name must be at least 4 characters long and only contain letters and spaces
        </p>}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-email">
        <input
          className="w-100"
          type="text"
          name="email"
          value={data.email}
          placeholder="Email"
          onChange={handleChange}
        />
        {error.email && <p className="error mt-2">Email must be a valid email address</p>}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-employee-id">
        <input
          className="w-100"
          type="text"
          name="employeeId"
          value={data.employeeId}
          placeholder="Employee ID"
          onChange={handleChange}
        />
        {error.employeeId && <p className="error mt-2">Employee ID must be exactly 6 digits</p>}
      </div>
      <div className="layout-column align-items-start mb-10 w-50" data-testid="input-joining-date">
        <input
          className="w-100"
          type="date"
          name="joiningDate"
          value={data.joiningDate}
          placeholder="Joining Date"
          onChange={handleChange}
        />
        {error.joiningDate && <p className="error mt-2">Joining Date cannot be in the future</p>}
      </div>
      <button data-testid="submit-btn" type="submit" disabled={error.name || error.email || error.employeeId || error.joiningDate}>
        Submit
      </button>
    </form>
  );
}

export default EmployeeValidationForm;

  • Ag_47
     + 0 comments

    check the date if its valid

    function check_date(value) { const date = value; setJoinDay(date); const today = new Date(); const selected = new Date(date);

        today.setHours(0, 0, 0, 0);

    if (selected > today) {
        setErrorDay("Joining Date cannot be in the future");
    } else {
        setErrorDay("");
    }
}

  • oulkarshubhu
     + 1 comment

    To pass all the test use today date as 2025-04-12

    const today = new Date('2025-04-12');