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

|

11 Discussions

|

  • erprashantbhatta
     + 0 comments

    Not able to submit or test. No test cases found. What to do?

  • mtegar057
     + 0 comments

    I trying so hard for this challenge, its weird because the logic is different, if u see the error carefully u would understand how to abuse it T_T

    the logic is,

    "joining date" will display two same error at the first, just clone the error. But if "joining date" was correctly inputed, that one error should shows until all field correctly inputed.

    THEN, if name, email, employeeId is null that "joining date" error should only shows once, but if u correctly input the "joining date" (while name, email, employeeId is null) all errors of "joining date" should disappear:)

  • coraltelecom4545
     + 0 comments

    here is my code its work fine but last four case not pass how to fix it

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

    function EmployeeValidationForm() {

    const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [id, setId] = useState(""); const [date, setDate] = useState(""); const [nameError, setNameError] = useState(true); const [emailError, setEmailError] = useState(true); const [idError, setIdError] = useState(true); const [dateError, setDateError] = useState(true); const [disableSubmit, setDisableSubmit] = useState(true);

    useEffect(() => { if (name && name?.length >= 4 && /^[a-zA-Z .]+$/.test(name)) { setNameError(false); } else { setNameError(true); } if (email && email.includes("@gmail.com")) { setEmailError(false); } else { setEmailError(true); } if (id && id.length >= 6) { setIdError(false); } else { setIdError(true); } const inputDate = new Date(date); const currentDate = new Date() if (date && currentDate >=inputDate) { setDateError(false); } else { setDateError(true); }

    }, [name, email, id, date])

    useEffect(() => { if (!nameError && !emailError && !idError && !dateError) { setDisableSubmit(false) } else { setDisableSubmit(true) } }, [nameError, emailError, idError, dateError])

    const handleSubmit =()=>{ setName(""); setDate(""); setEmail(""); setId(""); }

    return ( setName(event.target.value)} data-testid="input-name-test" /> {nameError && Name must be at least 4 characters long and only contain letters and spaces

    } setEmail(event.target.value)} /> {emailError && Email must be a valid email address

    } setId(event.target.value)} /> {idError && Employee ID must be exactly 6 digits

    } setDate(event.target.value)} /> {dateError && Joining Date cannot be in the future

    } Submit ); }

    export default EmployeeValidationForm;

  • ramakotireddy912
     + 0 comments
    import React, { useState, useEffect } from "react";

function EmployeeValidationForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [employeeId, setEmployeeId] = useState('');
  const [joiningDate, setJoiningDate] = useState('');
  const [validInputs, setValidInputs] = useState(false);

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const nameRegex = /^[A-Za-z\s]+$/;
  const employeeIdRegex = /^[0-9]{6}$/;

  const isNameValid = (name) => name.length >= 4 && nameRegex.test(name);
  const isEmailValid = (email) => emailRegex.test(email);
  const isEmployeeIdValid = (employeeId) => employeeIdRegex.test(employeeId);
  const isJoiningDateValid = (joiningDate) => new Date(joiningDate) < new Date();

  useEffect(() => {
    setValidInputs(
      isNameValid(name) &&
      isEmailValid(email) &&
      isEmployeeIdValid(employeeId) &&
      isJoiningDateValid(joiningDate)
    );
  }, [name, email, employeeId, joiningDate]);

  const handleSubmit = () => {
      setName('');
      setEmail('');
      setEmployeeId('');
      setJoiningDate('');
  };

  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={name}
          onChange={(evt) => setName(evt.target.value)}
          placeholder="Name"
          data-testid="input-name-test"
        />
        {!isNameValid(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={email}
          onChange={(evt) => setEmail(evt.target.value)}
          placeholder="Email"
        />
        {!isEmailValid(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={employeeId}
          onChange={(evt) => setEmployeeId(evt.target.value)}
          placeholder="Employee ID"
        />
        {!isEmployeeIdValid(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={joiningDate}
          onChange={(evt) => setJoiningDate(evt.target.value)}
          placeholder="Joining Date"
        />
        {!isJoiningDateValid(joiningDate) && (
          <p className="error mt-2">Joining Date cannot be in the future</p>
        )}
      </div>
      <button data-testid="submit-btn" type="submit" disabled={!validInputs} onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
}

export default EmployeeValidationForm;

  • businessmjurian
     + 0 comments

    This is my solution, I hope it helps 

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

function EmployeeValidationForm() {
  const [details, setDetails] = useState({
    name: "",
    email: "",
    employeeId: "",
    joiningDate: "",
  })

  const [isValidDetails, setIsValidDetails] = useState({
    name: false,
    email: false,
    employeeId: false,
    joiningDate: false
  })

  const regexValidName = /^[A-Za-z\s]*$/
  const regexValidEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  const regexValidId = /^\d+$/

  const validateFields = (name, value) => {
    let isValid = false

    switch (name) {
      case "name":
        isValid = value.length >= 4 && regexValidName.test(value);
        break;
      case "email":
        isValid = regexValidEmail.test(value);
        break;
      case "employeeId":
        isValid = regexValidId.test(value) && value.length === 6
        break;
      case "joiningDate":
        const today = new Date()
        const inputDate = new Date(value)
        isValid = !isNaN(inputDate.getTime()) && inputDate <= today
        break;
      default:
        break;
    }

    return isValid
  }

  const handleInputChange = (event) => {
    const { name, value } = event.target;

    setDetails((prevDetails) => ({
      ...prevDetails,
      [name]: value
    }))

    const isFieldValid = validateFields(name, value)
    setIsValidDetails((prevState) => ({
      ...prevState,
      [name]: isFieldValid
    }))
  }

  const onSubmit = () => {
    setDetails((prevDetails) => ({
      ...prevDetails,
      name: "",
      email: "",
      employeeId: "",
      joiningDate: "",
    }))
  }


  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"
          onChange={handleInputChange}
          value={details.name}
          type="text"
          name="name"
          placeholder="Name"
          data-testid="input-name-test"
        />
        {!isValidDetails.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"
          onChange={handleInputChange}
          value={details.email}
          type="text"
          name="email"
         
          placeholder="Email"
        />
        {!isValidDetails.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"
          onChange={handleInputChange}
          value={details.employeeId}
          type="text"
          name="employeeId"
          
          placeholder="Employee ID"
        />
          {!isValidDetails.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"
          onChange={handleInputChange}
          value={details.joiningDate}
          type="date"
          name="joiningDate"
          placeholder="Joining Date"
        />
         {!isValidDetails.joiningDate && (
          <p className="error mt-2">Joining Date cannot be in the future</p>
         )}
      </div>
      <button onClick={onSubmit} data-testid="submit-btn" type="submit" disabled={!Object.values(isValidDetails).every(Boolean)}>
        Submit
      </button>
    </div>
  );
}

export default EmployeeValidationForm;