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 JavascriptQCM Javascript – Partie 1QCM sur Javascript avec des réponses pour la préparation des tests techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

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