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;
