React Js form validation Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        const {useState } = React;

function App() {
            const [formData, setFormData] = useState({
                firstName: '',
                lastName: '',
                username: '',
                email: '',
                password: '',
                confirmPassword: '',
                image: ''
            });

const [errors, setErrors] = useState({
                firstName: '',
                lastName: '',
                username: '',
                email: '',
                password: '',
                confirmPassword: '',
                image: ''
            });

const handleSubmit = (event) => {
                event.preventDefault();
                if (validateForm()) {
                    console.log('Form data:', formData);
                }
            };

const validateForm = () => {
                let valid = true;

if (!formData.firstName.trim()) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        firstName: 'First name is required.'
                    }));
                    valid = false;
                }

if (!formData.lastName.trim()) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        lastName: 'Last name is required.'
                    }));
                    valid = false;
                }

if (!formData.username.trim()) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        username: 'Username is required.'
                    }));
                    valid = false;
                }

if (!formData.email.trim()) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        email: 'Email is required.'
                    }));
                    valid = false;
                } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        email: 'Invalid email address.'
                    }));
                    valid = false;
                }

if (!formData.password.trim()) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        password: 'Password is required.'
                    }));
                    valid = false;
                }

if (formData.password !== formData.confirmPassword) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        confirmPassword: 'Passwords do not match.'
                    }));
                    valid = false;
                }

if (!formData.image) {
                    setErrors((prevErrors) => ({
                        ...prevErrors,
                        image: 'Image is required.'
                    }));
                    valid = false;
                } else {
                    const imageSizeInMB = formData.image.size / (1024 * 1024); // Convert image size to MB
                    const maxSizeInMB = 1; // Maximum allowed image size in MB
                    if (imageSizeInMB > maxSizeInMB) {
                        setErrors((prevErrors) => ({
                            ...prevErrors,
                            image: `Image size should be less than ${maxSizeInMB}MB.`
                        }));
                        valid = false;
                    }
                }

return valid;
            };

return (
                <div className='container'>
                    <h3>React Js form validation Example</h3>
                    <form onSubmit={handleSubmit} className="form-container">
                        <div className="form-row">
                            <label className="form-label">First Name</label>
                            <input
                                type="text"
                                name="firstName"
                                value={formData.firstName}
                                onChange={handleChange}
                                className={errors.firstName ? 'form-input form-input-error' : 'form-input'}
                            />
                            {errors.firstName && <span className="form-error">{errors.firstName}</span>}
                        </div>

<div className="form-row">
                            <label className="form-label">Last Name</label>
                            <input
                                type="text"
                                name="lastName"
                                value={formData.lastName}
                                onChange={handleChange}
                                className={errors.lastName ? 'form-input form-input-error' : 'form-input'}
                            />
                            {errors.lastName && <span className="form-error">{errors.lastName}</span>}
                        </div>

<div className="form-row">
                            <label className="form-label">Username</label>
                            <input
                                type="text"
                                name="username"
                                value={formData.username}
                                onChange={handleChange}
                                className={errors.username ? 'form-input form-input-error' : 'form-input'}
                            />
                            {errors.username && <span className="form-error">{errors.username}</span>}
                        </div>

<div className="form-row">
                            <label className="form-label">Email</label>
                            <input
                                type="email"
                                name="email"
                                value={formData.email}
                                onChange={handleChange}
                                className={errors.email ? 'form-input form-input-error' : 'form-input'}
                            />
                            {errors.email && <span className="form-error">{errors.email}</span>}
                        </div>

<div className="form-row">
                            <label className="form-label">Password</label>
                            <input
                                type="password"
                                name="password"
                                value={formData.password}
                                onChange={handleChange}
                                className={errors.password ? 'form-input form-input-error' : 'form-input'}
                            />
                            {errors.password && <span className="form-error">{errors.password}</span>}
                        </div>

<div className="form-row">
                            <label className="form-label">Confirm Password</label>
                            <input
                                type="password"
                                name="confirmPassword"
                                value={formData.confirmPassword}
                                onChange={handleChange}
                                className={errors.confirmPassword ? 'form-input form-input-error' : 'form-input'}
                            />
                            {errors.confirmPassword && <span className="form-error">{errors.confirmPassword}</span>}
                        </div>

<div className="form-row">
                            <label className="form-label">Image</label>
                            <input
                                type="file"
                                name="image"
                                onChange={handleChange}
                                className={errors.image ? 'form-input form-input-error' : 'form-input'}
                            />
                            {errors.image && <span className="form-error">{errors.image}</span>}
                        </div>

<button type="submit" className="form-submit-btn">Submit</button>
                    </form>
                </div>

);
        }

ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        .container {
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            width: 600px;
            margin: 0 auto;
            padding: 20px
        }

/* Form Container */
        .form-container {
            display: flex;
            flex-direction: column;
            max-width: 400px;
            margin: 0 auto;
        }

/* Form Row */
        .form-row {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }

/* Form Label */
        .form-label {
            margin-bottom: 5px;
            font-weight: bold;
        }

/* Form Input */
        .form-input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

/* Form Input with Error */
        .form-input-error {
            border-color: #ff0000;
        }

/* Form Error Message */
        .form-error {
            color: #ff0000;
            font-size: 14px;
            margin-top: 5px;
        }

/* Form Submit Button */
        .form-submit-btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

/* Form Submit Button Hover */
        .form-submit-btn:hover {
            background-color: #0056b3;
        }
    </style>
</body>

</html>