Javascript pour formulaires

Accéder au formulaire

Voici 3 méthodes pout accéder au formulaire :

• Le trouver avec son ID

  <form id="monFormulaireID">
      <input type="text" name="prenom" placeholder="Ton prénom">
      <button type="button" onclick="afficherPrenom()">Afficher</button>
  </form>
  

  function afficherPrenom() {
      //Trouver la balise ayant l'ID donné
      let formulaire = document.getElementById("monFormulaireID");
      let prenom = formulaire.prenom.value;
      alert("Bonjour " + prenom + " !");
  }
  

• Le trouver avec son attribut name

  <form name="monFormulaireName">
      <input type="text" name="prenom" placeholder="Ton prénom">
      <button type="button" onclick="afficherPrenom()">Afficher</button>
  </form>
  

  function afficherPrenom() {
      //Trouver dans les formulaires de la page web celui qui a le nom donné
      let formulaire = document.forms["monFormulaireName"];
      let prenom = formulaire.prenom.value;
      alert("Bonjour " + prenom + " !");
  }
  

• Le recevoir en paramètre

  <form id="monFormulaireParam">
      <input type="text" name="prenom" placeholder="Ton prénom">
      <!--La fonction appelée reçoit le formulaire dans lequel se trouve le bouton-->
      <button type="button" onclick="afficherPrenom(this.form)">Afficher</button>
  </form>
  

  //Le paramètre reçoit le formulaire
  function afficherPrenom(formulaire) {
      let prenom = formulaire.prenom.value;
      alert("Bonjour " + prenom + " !");
  }
  

Valider un formulaire

Valider un formulaire consiste à vérifier :

• Si les champs obligatoire (required) ont une valeur
• Si les champs respectent le format (exemple : email nécessite un @ et un .)
• Si les pattern sont respectés (si on ajoute un pattern dans les attributs du champ)

Étapes :

1. Extraire le formulaire
2. Demander au navigateur de valider les champs
3. Vérifier la validité et stoper l'exécution si non valide

Quand valider ?

Cette méthode s'utilise avec les boutons de type button.

Les boutons de type submit font trois choses :

1. Valident déjà le formulaire
2. Essaient d'envoyer le formulaire à un serveur
3. Rafraîchissent la page

Ainsi, on ne doit pas utiliser de bouton submit si le traitement du formulaire est entièrement géré par notre code Javascript.

Lire la valeur d'un champ de formulaire

Pour les champs text, number, email, etc. : utiliser l'attribut value

function lireTexte() {
    let prenom = document.getElementById("champPrenom").value;
    alert("Ton prénom est : " + prenom);
}

Vérifier si une case à cocher est cochée

Pour des cases à cocher : vérifier si la valeur checked est true ou false

function lireCheckbox() {
    let coche = document.getElementById("caseAbonnement").checked;
    if(coche == true){
        alert("Vous êtes bien abonnés. Merci.");
    }
}

Vérifier quel bouton radio est sélectionné

Pour vérifier lequel des boutons radio est sélectionné, deux options sont possibles :

1. Vérifier lequel des boutons a l'attribut checked

2. Utiliser le formulaire pour nous indiquer la valeur du bouton coché :

   • Utiliser le formulaire et le name des boutons radio mutuellement exclusifs
   • Utiliser le value pour connaître la valeur du bouton sélectionné

HTML

<form>
    <div>
        <input type="radio" name="classe" id="classeEcono" value="economique">
        <label for="classeEcono">
            Classe économique
        </label>
    </div>
    <div>
        <input type="radio" name="classe" id="classeAffaires" value="affaires">
        <label for="classeAffaires">
            Classe affaires
        </label>
    </div>
</form>

Javascript

function afficherClasse()
{
    /*Option 1*/
    if(document.getElementById("classeEcono").checked == true)
    {
        alert("Classe économique");
    }
    if (document.getElementById("classeAffaires").checked == true) {
        alert("Classe affaires");
    }
    /*Option 2*/
    let formulaire = document.getElementById("formRadio");
    alert("Classe choisie : " + formulaire.classe.value);
}

Écrire dans un champ de formulaire

On utilise les mêmes attributs value ou checked pour modifier la valeur d'un champs par Javascript.

function modifierFormulaire()
{
    //Exemple de champs text et number
    document.getElementById("champPrenom").value = "Gérard";
    document.getElementById("champAge").value = 35;

    //Exemple pour case à cocher
    document.getElementById("abonnement").checked = true;

    //Exemple pour bouton radio
    document.getElementById("classeAffaires").checked = true;
}