Hackforge Academy

Explanation

Form validation in React ensures user input is correct before submitting data. It helps prevent invalid data like empty fields, incorrect email formats, or short passwords.

Code:

// Example: Basic validation concept
if(name === ""){
  alert("Name is required");
}

Explanation

Controlled components are commonly used for validation in React. Input values are stored in state and validated before submission.

Code:

const [name, setName] = useState("");

<input
  type="text"
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

Explanation

Simple required field validation checks whether the input is empty before allowing form submission.

Code:

const handleSubmit = (e) => {
  e.preventDefault();

  if(name.trim() === ""){
    alert("Name is required");
  }
};

Explanation

Email validation ensures users enter a properly formatted email address using regular expressions.

Code:

const validateEmail = (email) => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.
test(email);
};

Explanation

Error messages can be stored in state and displayed dynamically below input fields for better user experience.

Code:

const [error, setError] = useState("");

if(name === ""){
  setError("Name is required");
}

Explanation

You can disable the submit button until all validations pass, improving form usability and preventing incorrect submissions.

Code:

<button disabled={!name || !email}>
  Submit
</button>

Explanation

Multiple field validation can be handled using an errors object to track validation messages for each field.

Code:

const [errors, setErrors] = useState({});

if(!email){
  errors.email = "Email is required";
}

setErrors(errors);

Explanation

Displaying validation errors below input fields helps users quickly correct mistakes and improves overall UX ✨

Code:

{errors.email && (
  <p style={{color: "red"}}>{errors.email}
</p>
)}