How to implement client-side form validation in React



Image not found!!


Client-side form validation in React can be implemented using a variety of approaches, but one common method is to utilize React's state management to track form input values and validation errors. Here's a basic example of how you can implement client-side form validation in React:

jsx
import React, { useState } from 'react';

const FormValidationExample = () => {
  // Define state variables to track form input values and validation errors
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
  });
  const [errors, setErrors] = useState({});

  // Define a function to handle form input changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  // Define a function to validate form inputs
  const validateForm = () => {
    let newErrors = {};

    // Validate username
    if (formData.username.trim() === '') {
      newErrors.username = 'Username is required';
    }

    // Validate email
    if (!formData.email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) {
      newErrors.email = 'Invalid email address';
    }

    // Validate password
    if (formData.password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters long';
    }

    // Set the new validation errors
    setErrors(newErrors);

    // Return true if there are no validation errors, false otherwise
    return Object.keys(newErrors).length === 0;
  };

  // Define a function to handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    if (validateForm()) {
      // Form is valid, submit the data or perform other actions
      console.log('Form submitted:', formData);
    } else {
      // Form is invalid, do not submit and display validation errors
      console.log('Form validation failed');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={formData.username}
          onChange={handleInputChange}
        />
        {errors.username && <span>{errors.username}</span>}
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
        />
        {errors.password && <span>{errors.password}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormValidationExample;

In this example:

  • We use React's useState hook to manage form data and validation errors.
  • The handleInputChange function updates the form data state whenever the input values change.
  • The validateForm function is called before form submission to check the validity of form inputs. It updates the errors state with any validation errors encountered.
  • The handleSubmit function is called when the form is submitted. It first validates the form and then either submits the form data (if valid) or displays validation errors.
  • Validation errors are displayed below each input field if they exist.

You can customize the validation logic and error messages according to your specific requirements. Additionally, you might want to explore libraries like Formik or react-hook-form for more advanced form management and validation features.

Category List