How do I apply HTML5 Validation with React

Question

Can you tell me How do I apply HTML5 Validation with React?

Answer 1

You can utilize the built-in HTML5 form validation attributes, such as required, pattern, min, max, type, etc., along with React's controlled form components to manage form data and handle validation.

Code:

import React, { useState } from 'react';

function MyForm() {

  const [formData, setFormData] = useState({

    email: '',

    password: '',

    age: ''

  });

  const handleChange = (e) => {

    const { name, value } = e.target;

    setFormData((prevData) => ({

      ...prevData,

      [name]: value

    }));

  };

  const handleSubmit = (e) => {

    e.preventDefault();

    const form = e.target;

    // HTML5 form validation

    if (form.checkValidity()) {

      console.log('Form submitted successfully');

      // Process form data

    } else {

      console.log('Form validation failed');

      form.reportValidity();

    }

  };

  return (

    <form onSubmit={handleSubmit} noValidate>

      <div>

        <label htmlFor="email">Enter your Email:</label>

        <input

          type="email"

          id="email"

          name="email"

          value={formData.email}

          onChange={handleChange}

          required

        />

      </div>

      <div>

        <label htmlFor="password">Enter correct Password:</label>

        <input

          type="password"

          id="password"

          name="password"

          value={formData.password}

          onChange={handleChange}

          required

          minLength="6"

        />

      </div>

      <div>

        <label htmlFor="age">Enter your Age:</label>

        <input

          type="number"

          id="age"

          name="age"

          value={formData.age}

          onChange={handleChange}

          required

          min="18"

          max="100"

        />

      </div>

      <button type="submit">Done</button>

    </form>

  );

}

export default MyForm;