JavaScript - DOM Forms: A Guide for Beginners
Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons plonger dans le monde passionnant de JavaScript et des formulaires DOM. En tant que votre professeur d'informatique de quartier, je suis là pour vous guider à travers ce voyage étape par étape. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et embarquons dans cette aventure ensemble !
Les formulaires DOM
Avant de nous plonger dans les détails de JavaScript et des formulaires, penchons-nous un moment sur ce que sont les formulaires DOM. DOM signifie Document Object Model, et c'est essentiellement une manière pour JavaScript d'interagir avec les éléments HTML sur une page web.
Pensez au DOM comme un arbre généalogique pour votre page web. Chaque élément est comme un membre de la famille, et JavaScript est le cousin cool qui peut bavarder avec tout le monde et faire des choses !
Maintenant, en ce qui concerne les formulaires, ils sont comme les questionnaires interactifs du monde web. Ils permettent aux utilisateurs de saisir des données, de faire des sélections et de soumettre des informations aux sites web. Jetons un œil à un formulaire HTML simple :
<form id="myForm">
<label for="name">Nom:</label>
<input type="text" id="name" name="name">
<button type="submit">Soumettre</button>
</form>Ce formulaire contient un champ de saisie pour un nom et un bouton de soumission. Pretty straightforward, n'est-ce pas ? Maintenant, voyons comment nous pouvons interagir avec ce formulaire en utilisant JavaScript !
Soumission de formulaire JavaScript
Lorsqu'un utilisateur remplit un formulaire et clique sur ce bouton de soumission, nous voulons souvent faire quelque chose avec ces données avant de les envoyer à un serveur. C'est là que JavaScript entre en jeu !
Voici un exemple de la manière dont nous pouvons gérer la soumission de formulaire avec JavaScript :
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Empêche la soumission normale du formulaire
var name = document.getElementById('name').value;
console.log('Bonjour, ' + name + '!');
});Reprenons cela :
- Nous sélectionnons notre formulaire en utilisant
document.getElementById('myForm'). - Nous ajoutons un écouteur d'événement pour l'événement 'submit'.
-
event.preventDefault()arrête la soumission normale du formulaire (ce quiWould refresh the page). - Nous obtenons la valeur du champ de saisie du nom et affichons un message de bienvenue dans la console.
Maintenant, lorsque vous soumettez le formulaire, au lieu que la page se recharge, vous verrez un message de bienvenue dans la console. Génial, n'est-ce pas ?
Validation de formulaire JavaScript
La validation de formulaire est comme avoir un vigile amical à l'entrée d'un club. Il vérifie si tout est en ordre avant de laisser les données passer. Jetons un œil sur la manière dont nous pouvons valider notre formulaire en utilisant JavaScript :
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
if (name.trim() === '') {
alert('Veuillez saisir votre nom !');
} else {
console.log('Bonjour, ' + name + '!');
}
});Dans cet exemple, nous vérifions si le champ du nom est vide (ou contient uniquement des espaces). Si c'est le cas, nous affichons une alerte demandant à l'utilisateur de saisir son nom. Sinon, nous affichons le message de bienvenue.
Validation des données du formulaire JavaScript
Parfois, nous devons valider des données plus complexes. Disons que nous voulons ajouter un champ d'email à notre formulaire et nous assurer qu'il s'agit d'une adresse email valide :
<form id="myForm">
<label for="name">Nom:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Soumettre</button>
</form>Et voici comment nous pouvons le valider :
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
if (name.trim() === '') {
alert('Veuillez saisir votre nom !');
return;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('Veuillez saisir une adresse email valide !');
return;
}
console.log('Bonjour, ' + name + '! Nous vous contacterons à ' + email);
});Dans cet exemple, nous utilisons une expression régulière pour vérifier si l'email est valide. Ne vous inquiétez pas si cela ressemble à du charabia - les expressions régulières sont un sujet pour un autre jour !
Validation des formulaires utilisant les contraintes HTML
Maintenant, voici un petit secret : HTML5 a des fonctionnalités de validation de formulaire intégrées qui peuvent rendre notre vie plus facile. Mettons à jour notre formulaire pour utiliser celles-ci :
<form id="myForm">
<label for="name">Nom:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Soumettre</button>
</form>En ajoutant l'attribut required à nos champs d'entrée et en utilisant type="email" pour le champ d'email, nous obtenons une validation de base gratuite ! Le navigateur empêchera la soumission du formulaire et affichera des messages d'erreur si ces champs sont vides ou invalides.
Mais nous pouvons toujours utiliser JavaScript pour personnaliser ce comportement :
document.getElementById('myForm').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault();
alert('Veuillez remplir tous les champs correctement !');
} else {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
console.log('Bonjour, ' + name + '! Nous vous contacterons à ' + email);
}
});Ce code vérifie si le formulaire est valide selon les contraintes HTML. S'il ne l'est pas, nous empêchons la soumission et affichons une alerte. S'il l'est, nous procédons avec notre message de bienvenue.
Conclusion
Et voilà, amis ! Nous avons traversé le pays des formulaires DOM et de JavaScript, de la soumission de base à la validation et au-delà. Souvenez-vous, les formulaires sont comme des conversations entre votre site web et ses utilisateurs. Avec JavaScript, vous assurez que cette conversation se déroule sans heurt et que tout le monde se comprend.
Voici un tableau de référence rapide des méthodes que nous avons utilisées :
| Méthode | Description |
|---|---|
document.getElementById() |
Sélectionne un élément par son ID |
addEventListener() |
Attache un gestionnaire d'événement à un élément |
event.preventDefault() |
Empêche l'action par défaut d'un événement |
element.value |
Obtient ou définit la valeur d'un élément de formulaire |
alert() |
Affiche un message popup à l'utilisateur |
console.log() |
Enregistre un message dans la console |
form.checkValidity() |
Vérifie si un formulaire satisfait toutes ses contraintes de validation |
Continuez à pratiquer, continuez à coder, et avant que vous ne vous en rendiez compte, vous créerez des expériences web interactives incroyables ! Souvenez-vous, chaque expert était autrefois un débutant. Ne vous découragez pas si les choses ne semblent pas claires tout de suite. Continuez, et vous serez étonné de ce que vous pouvez accomplir !
Credits: Image by storyset