Maîtriser l’Exercice de Formulaire en JavaScript : Un Guide Détaillé

Explication :

Ce code crée un formulaire avec un champ de saisie de texte initial et un bouton pour ajouter dynamiquement un autre champ de saisie de texte. Lorsque l’utilisateur clique sur le bouton “Ajouter un champ”, la fonction addInput() est déclenchée, ce qui ajoute un nouveau champ de saisie de texte au formulaire.

2. Validation de Formulaire Avancée

Objectif :

Illustrer comment valider un formulaire avec des critères plus complexes, tels que la vérification d’un format d’email correct.

Exemple de Code :

<form id="contactForm" onsubmit="return validateForm()">
    <input type="text" id="name" placeholder="Nom" required><br>
    <input type="email" id="email" placeholder="Email" required><br>
    <textarea id="message" placeholder="Message" required></textarea><br>
    <input type="submit" value="Envoyer">
</form>

<script>
function validateForm() {
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var message = document.getElementById('message').value;

    if (name === '' || email === '' || message === '') {
        alert('Veuillez remplir tous les champs.');
        return false;
    }

    // Validation d'email
    var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
        alert('Veuillez saisir une adresse email valide.');
        return false;
    }

    // Autres validations possibles...

    // Si toutes les validations passent, le formulaire est soumis
    return true;
}
</script>

Explication :

Dans cet exemple, en plus de vérifier que tous les champs sont remplis, une validation est effectuée sur le champ email à l’aide d’une expression régulière (emailPattern). Cette expression régulière vérifie si l’email est dans un format valide. Si la validation échoue, un message d’erreur est affiché, et le formulaire ne sera pas soumis.

Ces exemples démontrent comment JavaScript peut être utilisé pour manipuler et valider les formulaires web de manière dynamique et efficace. En combinant ces techniques avec d’autres fonctionnalités JavaScript, les développeurs peuvent créer des expériences utilisateur interactives et conviviales sur le web.

1. Cas Particulier : Génération Dynamique de Champs en Fonction de la Sélection

Objectif :

Créer un formulaire dynamique où la sélection d’une option détermine le nombre de champs de saisie à afficher.

Exemple de Code :

<form id="dynamicForm">
    <label for="quantity">Nombre de champs :</label>
    <select id="quantity" onchange="generateInputs()">
        <option value="1">1 champ</option>
        <option value="2">2 champs</option>
        <option value="3">3 champs</option>
    </select><br>
    <div id="inputs"></div>
    <input type="submit" value="Soumettre">
</form>

<script>
function generateInputs() {
    var quantity = document.getElementById('quantity').value;
    var inputsDiv = document.getElementById('inputs');
    inputsDiv.innerHTML = '';

    for (var i = 0; i < quantity; i++) {
        var input = document.createElement('input');
        input.type = 'text';
        input.name = 'input' + (i + 1);
        input.placeholder = 'Champ ' + (i + 1);
        inputsDiv.appendChild(input);
        inputsDiv.appendChild(document.createElement('br'));
    }
}
</script>

Explication :

Ce formulaire contient un menu déroulant où l’utilisateur peut choisir le nombre de champs de saisie à afficher. Lorsqu’une option est sélectionnée, la fonction generateInputs() est appelée, ce qui génère dynamiquement les champs de saisie correspondants et les ajoute au formulaire.

2. Cas Particulier : Validation de Champ avec Comparaison de Valeurs

Objectif :

Valider un champ de saisie en s’assurant qu’il est supérieur à une autre valeur saisie.

Exemple de Code :

<form id="comparisonForm" onsubmit="return validateComparison()">
    <label for="input1">Valeur 1 :</label>
    <input type="number" id="input1" required><br>
    <label for="input2">Valeur 2 :</label>
    <input type="number" id="input2" required><br>
    <input type="submit" value="Comparer">
</form>

<script>
function validateComparison() {
    var value1 = parseFloat(document.getElementById('input1').value);
    var value2 = parseFloat(document.getElementById('input2').value);

    if (value1 <= value2) {
        alert('La valeur 1 doit être supérieure à la valeur 2.');
        return false;
    }

    return true;
}
</script>

Explication :

Ce formulaire demande à l’utilisateur de saisir deux valeurs numériques. Lorsque le formulaire est soumis, la fonction validateComparison() est appelée pour comparer les deux valeurs. Si la valeur 1 n’est pas supérieure à la valeur 2, un message d’erreur est affiché et le formulaire ne sera pas soumis.

Ces cas particuliers démontrent comment JavaScript peut être utilisé pour répondre à des exigences spécifiques lors de la création et de la validation de formulaires web. En comprenant ces concepts, les développeurs peuvent créer des formulaires interactifs et complexes répondant aux besoins de leurs utilisateurs.

Conclusion

La manipulation et la validation des formulaires en JavaScript sont des compétences essentielles pour tout développeur web. En comprenant les techniques de base et en suivant les meilleures pratiques, vous pouvez créer des expériences utilisateur interactives et robustes. Avec une pratique régulière et une compréhension approfondie des concepts, vous pourrez créer des formulaires web efficaces et conviviaux.