How to validate email in React form
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Validating email addresses in React forms ensures data integrity and prevents invalid submissions while providing immediate user feedback for better form experience. As the creator of CoreUI with extensive React experience since 2014, I’ve implemented email validation in countless enterprise applications for user registration and contact forms. The most reliable approach uses regex pattern matching combined with real-time validation state management for instant visual feedback and error messaging. This method provides comprehensive validation while maintaining excellent user experience through immediate feedback and accessible error handling.
Use regex pattern matching with useState to validate email addresses in real-time with visual feedback and error messages.
import { useState } from 'react'
const EmailValidationForm = () => {
const [email, setEmail] = useState('')
const [emailError, setEmailError] = useState('')
const [touched, setTouched] = useState(false)
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
const validateEmail = (value) => {
if (!value) {
return 'Email is required'
}
if (!emailRegex.test(value)) {
return 'Please enter a valid email address'
}
return ''
}
const handleEmailChange = (e) => {
const value = e.target.value
setEmail(value)
if (touched) {
const error = validateEmail(value)
setEmailError(error)
}
}
const handleEmailBlur = () => {
setTouched(true)
const error = validateEmail(email)
setEmailError(error)
}
const handleSubmit = (e) => {
e.preventDefault()
setTouched(true)
const error = validateEmail(email)
setEmailError(error)
if (!error) {
console.log('Valid email:', email)
// Process form submission
}
}
const isValid = email && !emailError && touched
return (
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="email">Email Address</label>
<input
id="email"
type="email"
value={email}
onChange={handleEmailChange}
onBlur={handleEmailBlur}
className={`form-control ${
touched ? (emailError ? 'is-invalid' : isValid ? 'is-valid' : '') : ''
}`}
placeholder="Enter your email"
/>
{touched && emailError && (
<div className="invalid-feedback">{emailError}</div>
)}
{touched && isValid && (
<div className="valid-feedback">Email looks good!</div>
)}
</div>
<button
type="submit"
className="btn btn-primary"
disabled={!isValid}
>
Submit
</button>
</form>
)
}
This code implements comprehensive email validation using a robust regex pattern that checks for proper email format with real-time validation feedback. The component manages validation state with touched tracking to avoid showing errors before user interaction, and provides immediate visual feedback through CSS classes and error messages. The validation runs on both input change and blur events, ensuring users receive feedback at appropriate times while preventing premature error displays.
Best Practice Note:
This is the email validation pattern we use in CoreUI form components for enterprise-grade user input handling. Consider adding server-side validation for email deliverability and implement proper accessibility features like aria-describedby for screen readers.
