Auteur : Bilal Zouine

Description : description Cet exemple montre un formulaire de création de compte avec validation des champs obligatoires. Lorsque tous les champs sont remplis et que le formulaire est soumis, un message de succès s'affiche. Si des champs sont vides, une alerte est déclenchée.

Fonctionnalités :

• Collecter les informations de l'utilisateur (nom, email, mot de passe).
• Valider que tous les champs sont remplis avant la soumission.
• Afficher un message de succès lorsque le compte est créé.
• Empêcher le rechargement de la page lors de la soumission du formulaire.

Code :

              
                import React, { useState } from 'react';

// Fonction qui gère le formulaire de création de compte
export default function SignupForm() {
    // États pour stocker les informations de l'utilisateur
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [isSubmitted, setIsSubmitted] = useState(false);

    // Fonction pour gérer la soumission du formulaire
    const handleSubmit = (e) => {
        e.preventDefault() // Empêche le rechargement de la page
        // Vérifie si tous les champs sont remplis
        if (username !== "" && email !== "" && password !== "") {
            setIsSubmitted(true) // Change l'état à soumis si tous les champs sont remplis
            return;
        }
        alert("Tous les champs sont obligatoires.") // Alerte si des champs sont vides
    }

    return (
        <div className="container mt-5">
            <fieldset className="w-75 mx-auto mb-3">
                <legend className="text-cnter text-info">Formulaire de création de compte</legend>
                {
                    isSubmitted ? (
                        // Affichage d'un message de succès si le formulaire est soumis
                        <p className='alert alert-success '>Compte créé !!!!!!</p>
                    ) : (
                        // Formulaire pour saisir les informations de l'utilisateur
                        <form onSubmit={handleSubmit} className='alert alert-danger'>
                            <div className="form-group">
                                <label className='form-label'>nom et prenom</label>
                                <input type="text" className="form-control" name="name" onChange={(e) => { setUsername(e.target.value) }} value={username} />
                            </div>
                            <div className="form-group">
                                <label className='form-label'>email</label>
                                <input type="email" className="form-control" name="email" onChange={(e) => { setEmail(e.target.value) }} value={email} />
                            </div>
                            <div className="form-group">
                                <label className='form-label'>password</label>
                                <input type="password" className="form-control" name="password" onChange={(e) => { setPassword(e.target.value) }} value={password} />
                            </div>
                            <div className="form-group">
                                <input type="submit" value="Créer un compte" className="btn btn-info fw-bold d-flex mx-auto bt-sm mt-3" />
                            </div>
                        </form>
                    )
                }
            </fieldset>
        </div>
    )
}