Email Form With Simple Validation
ReactJS
Medium
8 views
Problem Description
Create an email form that shows an error if input is empty or invalid.
Output Format
Render a React component.
Constraints
Validate on submit and show a message.
Official Solution
import React, { useState } from 'react';
function isEmail(value) {
return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value);
}
export default function App() {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const [done, setDone] = useState(false);
function submit(e) {
e.preventDefault();
setDone(false);
if (!email.trim()) {
setError('Email is required');
return;
}
if (!isEmail(email.trim())) {
setError('Enter a valid email');
return;
}
setError('');
setDone(true);
}
return (
<div style={{ padding: 16, width: 420 }}>
<h2 style={{ marginTop: 0 }}>meetcode newsletter</h2>
<form onSubmit={submit} style={{ display: 'grid', gap: 10 }}>
<label>
Email
<div>
<input value={email} onChange={(e) => setEmail(e.target.value)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid ' + (error ? '#c1121f' : '#bbb'), width: '100%' }} />
</div>
</label>
<button type='submit' style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Subscribe</button>
</form>
{error ? <div style={{ marginTop: 10, color: '#c1121f' }}>{error}</div> : null}
{done ? <div style={{ marginTop: 10, color: '#0b5' }}>Saved on meetcode.</div> : null}
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!