Form Validation in React

Key Concepts

• Controlled Components
• Uncontrolled Components
• Validation Techniques
• Error Messages
• Real-time Validation
• Form Submission
• Custom Validation

Controlled Components

Controlled Components are form elements whose values are controlled by React state. This means that the value of the input is set by the state, and any changes to the input are handled by updating the state.

Example:

        function ControlledForm() {
            const [value, setValue] = React.useState('');

            const handleChange = (event) => {
                setValue(event.target.value);
            };

            return (
                <input type="text" value={value} onChange={handleChange} />
            );
        }
    

Uncontrolled Components

Uncontrolled Components are form elements whose values are handled by the DOM itself. Instead of using React state, you use a ref to get the input value directly from the DOM.

Example:

        function UncontrolledForm() {
            const inputRef = React.useRef(null);

            const handleSubmit = (event) => {
                event.preventDefault();
                alert(inputRef.current.value);
            };

            return (
                <form onSubmit={handleSubmit}>
                    <input type="text" ref={inputRef} />
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Validation Techniques

Validation Techniques ensure that the data entered by the user meets certain criteria. Common techniques include checking for required fields, validating email formats, and ensuring password strength.

Example:

        function ValidationForm() {
            const [email, setEmail] = React.useState('');
            const [error, setError] = React.useState('');

            const handleChange = (event) => {
                setEmail(event.target.value);
                if (!/\S+@\S+\.\S+/.test(event.target.value)) {
                    setError('Invalid email address');
                } else {
                    setError('');
                }
            };

            return (
                <div>
                    <input type="text" value={email} onChange={handleChange} />
                    {error && <p>{error}</p>}
                </div>
            );
        }
    

Error Messages

Error Messages are displayed to inform the user about validation issues. They help guide the user to correct their input.

Example:

        function ErrorMessageForm() {
            const [password, setPassword] = React.useState('');
            const [error, setError] = React.useState('');

            const handleChange = (event) => {
                setPassword(event.target.value);
                if (event.target.value.length < 8) {
                    setError('Password must be at least 8 characters');
                } else {
                    setError('');
                }
            };

            return (
                <div>
                    <input type="password" value={password} onChange={handleChange} />
                    {error && <p>{error}</p>}
                </div>
            );
        }
    

Real-time Validation

Real-time Validation involves validating the form input as the user types. This provides immediate feedback and helps the user correct errors as they occur.

Example:

        function RealTimeValidationForm() {
            const [username, setUsername] = React.useState('');
            const [error, setError] = React.useState('');

            const handleChange = (event) => {
                setUsername(event.target.value);
                if (event.target.value.length < 5) {
                    setError('Username must be at least 5 characters');
                } else {
                    setError('');
                }
            };

            return (
                <div>
                    <input type="text" value={username} onChange={handleChange} />
                    {error && <p>{error}</p>}
                </div>
            );
        }
    

Form Submission

Form Submission involves handling the form data when the user submits the form. This typically includes validating the form data and sending it to a server.

Example:

        function SubmitForm() {
            const [name, setName] = React.useState('');
            const [email, setEmail] = React.useState('');
            const [error, setError] = React.useState('');

            const handleSubmit = (event) => {
                event.preventDefault();
                if (!name || !email) {
                    setError('All fields are required');
                } else {
                    alert('Form submitted successfully');
                }
            };

            return (
                <form onSubmit={handleSubmit}>
                    <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
                    <input type="text" value={email} onChange={(e) => setEmail(e.target.value)} />
                    {error && <p>{error}</p>}
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Custom Validation

Custom Validation allows you to define specific validation rules for your form. This can include complex logic such as checking for unique usernames or validating against a specific pattern.

Example:

        function CustomValidationForm() {
            const [username, setUsername] = React.useState('');
            const [error, setError] = React.useState('');

            const validateUsername = (value) => {
                if (value.length < 5) {
                    return 'Username must be at least 5 characters';
                }
                if (!/^[a-zA-Z0-9]+$/.test(value)) {
                    return 'Username must contain only letters and numbers';
                }
                return '';
            };

            const handleChange = (event) => {
                setUsername(event.target.value);
                setError(validateUsername(event.target.value));
            };

            return (
                <div>
                    <input type="text" value={username} onChange={handleChange} />
                    {error && <p>{error}</p>}
                </div>
            );
        }
    

Analogies

Think of form validation as a security guard at a nightclub. The guard (validation logic) checks each guest's ID (form input) to ensure they meet the club's requirements (validation rules). If a guest's ID is invalid (input fails validation), the guard (error message) informs them of the issue (displays error) and asks them to correct it (user fixes input).

Another analogy is a teacher grading a test. The teacher (validation logic) checks each answer (form input) against the correct answers (validation rules). If an answer is wrong (input fails validation), the teacher (error message) marks it with a red pen (displays error) and provides feedback (user fixes input).