Discussion on Employee Validation Challenge

Sort by

recency

|

12 Discussions

|

3 days ago+ 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;

3 weeks ago+ 0 comments

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

1 month ago+ 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:)

1 month ago+ 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;

1 month ago+ 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;

Sort by

|

12 Discussions

|

Cookie support is required to access HackerRank