Afficher un message d’erreur à coté d’un input en Javascript

Dans ce tutoriel nous allons découvrir comment afficher un message d’erreur à coté d’un input en Javascript. Dans l’exemple ci-dessous, nous allons afficher le message d’erreur dans le cas ou l’utilisateur n’a pas rempli l’input texte.
 
 

Exemple:
<html>
   <head>
      <script> 
         function validateForm()                                 
         { 
             var name = document.forms["myForm"]["name"];         
             if (name.value == ""){ 
                 document.getElementById('errorname').innerHTML="Veuillez entrez un nom valide";  
                 name.focus(); 
                 return false; 
             }else{
                 document.getElementById('errorname').innerHTML="";  
             }
         }
      </script> 
      <style>
         .error{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
   </head>
   <body>
      <form name="myForm" onsubmit="return validateForm()">
         <p>Votre nom: <input type="text" name="name" class="field-long"/>  <span class="error" id="errorname"></span></p>
         <p><input type="submit" value="Envoyer"></p>
      </form>
   </body>
</html>
Résultat

Votre nom:

QCM Javascript

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *