Follow me on LinkedIn
Follow me on Github.com
0.Form Validation Without Third-Party Libraries
import React, { useState } from 'react';
function BasicFormValidation() {
const [formData, setFormData] = useState({ name: '', email: '' });
const [errors, setErrors] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const validate = () => {
let tempErrors = {};
tempErrors.name = formData.name ? "" : "Name is required";
tempErrors.email = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formData.email) ? "" : "Email is not valid";
setErrors(tempErrors);
return Object.keys(tempErrors).every(x => tempErrors[x] === "");
};
const handleSubmit = (e) => {
e.preventDefault();
if (validate()) {
alert("Form submitted successfully");
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name</label>
<input type="text" name="name" value={formData.name} onChange={handleChange} />
{errors.name && <div style={{ color: 'red' }}>{errors.name}</div>}
</div>
<div>
<label>Email</label>
<input type="email" name="email" value={formData.email} onChange={handleChange} />
{errors.email && <div style={{ color: 'red' }}>{errors.email}</div>}
</div>
<button type="submit">Submit</button>
</form>
);
}
export default BasicFormValidation;
1.Using React Hooks
import React, { useState, useEffect } from 'react';
function HookFormValidation() {
const [formData, setFormData] = useState({ username: '', password: '' });
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const validate = () => {
let tempErrors = {};
tempErrors.username = formData.username ? "" : "Username is required";
tempErrors.password = formData.password.length > 6 ? "" : "Password must be at least 6 characters long";
setErrors(tempErrors);
return Object.keys(tempErrors).every(x => tempErrors[x] === "");
};
const handleSubmit = (e) => {
e.preventDefault();
if (validate()) {
setIsSubmitting(true);
}
};
useEffect(() => {
if (isSubmitting) {
alert("Form submitted successfully");
setIsSubmitting(false);
}
}, [isSubmitting]);
return (
<form onSubmit={handleSubmit}>
<div>
<label>Username</label>
<input type="text" name="username" value={formData.username} onChange={handleChange} />
{errors.username && <div style={{ color: 'red' }}>{errors.username}</div>}
</div>
<div>
<label>Password</label>
<input type="password" name="password" value={formData.password} onChange={handleChange} />
{errors.password && <div style={{ color: 'red' }}>{errors.password}</div>}
</div>
<button type="submit">Submit</button>
</form>
);
}
export default HookFormValidation;
2.Form Validation With Third-Party Libraries
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
const FormikFormValidation = () => {
const formik = useFormik({
initialValues: {
firstName: '',
lastName: '',
email: '',
},
validationSchema: Yup.object({
firstName: Yup.string()
.max(15, 'Must be 15 characters or less')
.required('Required'),
lastName: Yup.string()
.max(20, 'Must be 20 characters or less')
.required('Required'),
email: Yup.string().email('Invalid email address').required('Required'),
}),
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div>
<label>First Name</label>
<input
type="text"
name="firstName"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.firstName}
/>
{formik.touched.firstName && formik.errors.firstName ? (
<div style={{ color: 'red' }}>{formik.errors.firstName}</div>
) : null}
</div>
<div>
<label>Last Name</label>
<input
type="text"
name="lastName"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.lastName}
/>
{formik.touched.lastName && formik.errors.lastName ? (
<div style={{ color: 'red' }}>{formik.errors.lastName}</div>
) : null}
</div>
<div>
<label>Email</label>
<input
type="email"
name="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div style={{ color: 'red' }}>{formik.errors.email}</div>
) : null}
</div>
<button type="submit">Submit</button>
</form>
);
};
export default FormikFormValidation;
3.Using React Hook Form
import React from 'react';
import { useForm } from 'react-hook-form';
function ReactHookFormValidation() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = (data) => alert(JSON.stringify(data));
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Username</label>
<input {...register("username", { required: "Username is required" })} />
{errors.username && <div style={{ color: 'red' }}>{errors.username.message}</div>}
</div>
<div>
<label>Password</label>
<input {...register("password", { required: "Password is required", minLength: { value: 6, message: "Password must be at least 6 characters long" } })} />
{errors.password && <div style={{ color: 'red' }}>{errors.password.message}</div>}
</div>
<button type="submit">Submit</button>
</form>
);
}
export default ReactHookFormValidation;
4.Using Yup with Formik
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
const FormikYupValidation = () => {
const formik = useFormik({
initialValues: {
username: '',
email: '',
},
validationSchema: Yup.object({
username: Yup.string()
.max(15, 'Must be 15 characters or less')
.required('Required'),
email: Yup.string().email('Invalid email address').required('Required'),
}),
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div>
<label>Username</label>
<input
type="text"
name="username"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.username}
/>
{formik.touched.username && formik.errors.username ? (
<div style={{ color: 'red' }}>{formik.errors.username}</div>
) : null}
</div>
<div>
<label>Email</label>
<input
type="email"
name="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div style={{ color: 'red' }}>{formik.errors.email}</div>
) : null}
</div>
<button type="submit">Submit</button>
</form>
);
};
export default FormikYupValidation;
Byyyy
Happy Coding !
Top comments (1)
Nice article. One thing I ran into while building forms is that a lot of validation solutions end up requiring quite a bit of React-specific code. In FrontAlign I took a different approach by relying on native HTML5 validation and declarative attributes, so the same validation works across React, Vue, Svelte, or plain HTML with almost no JavaScript. Curious what you think about this approach.