Soumettre le formulaire en utilisant JavaScript

1. Créer un formulaire HTML
2. Accéder au formulaire
3. Obtenir les valeurs des champs de formulaire en JavaScript
4. Valider les données des champs de formulaire en JavaScript

Ce didacticiel présentera comment soumettre un formulaire à l’aide de JavaScript.

Les formulaires aident à récupérer les données des utilisateurs et à les stocker dans une base de données structurée. La soumission de formulaires est un événement clé lorsque nous travaillons avec diverses applications et sites Web. Ce n’est pas aussi simple que d’appeler form.submit() ou de cliquer sur le bouton Soumettre. Lorsque le formulaire est soumis, l’événement de soumission est déclenché juste avant que la demande ne soit envoyée au serveur. C’est là que JavaScript entrera en action et validera les données saisies. Nous pouvons même créer des objets et ajouter divers attributs.

Donc, pour soumettre un formulaire, il faut d’abord créer un formulaire, accéder au formulaire, récupérer les valeurs des différents champs, valider toutes les valeurs puis soit cliquer sur le bouton soumettre / appeler for.submit().

Créer un formulaire HTML

Nous pouvons créer un formulaire HTML en utilisant l’élément <form>.

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

Le formulaire ci-dessus a deux attributs: action et method.

1. action: Il spécifie l’URL qui gérera le processus de soumission du formulaire.
2. method*: Elle spécifie la méthode HTTP utilisée pour soumettre le formulaire. La méthode post permet de stocker des données dans une base de données en envoyant les données au serveur dans le corps de la requête. La méthode get ajoute les données du formulaire à une URL qui a ?.

Accéder au formulaire

Nous pouvons accéder aux éléments de formulaire en utilisant l’un des sélecteurs JavaScript tels que getElementByTag, getElementById, etc.

let form = document.getElementById('signup-form');

Obtenir les valeurs des champs de formulaire en JavaScript

Nous pouvons accéder aux champs de saisie dans le formulaire en utilisant le tableau des éléments du formulaire ou en référençant l’id du champ. Après avoir accédé au champ, nous pouvons utiliser l’attribut .values pour récupérer les valeurs stockées dans ce champ. Une fois que nous avons acquis les données du formulaire, nous pouvons valider les données avant de procéder à la soumission finale du formulaire.

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

Valider les données des champs de formulaire en JavaScript

Nous ajoutons un écouteur d’événement au bouton d’envoi et appelons notre procédure de validation avant de passer à la page suivante. Par exemple: pour une page d’inscription, l’utilisateur doit fournir à la fois l’e-mail et le mot de passe.

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

Dans le code ci-dessus, nous avons écrit un petit contrôle de validation pour voir si le champ de saisie est vide. Ensuite, nous avons attaché un écouteur d’événement au bouton d’envoi pour traiter d’abord les données avant de les transmettre à l’URL d’action. On s’assure que le champ de saisie n’est pas vide, et dans le cas où c’est le cas, on empêche la soumission du formulaire en appelant event.preventDefault(). De cette manière, JavaScript et HTML gèrent la soumission complète du formulaire.