Maison >interface Web >js tutoriel >Comment afficher une erreur sans boîte d'alerte en utilisant JavaScript ?

Comment afficher une erreur sans boîte d'alerte en utilisant JavaScript ?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBavant: 2023-09-12 22:37:021577parcourir

如何使用 JavaScript 在没有警告框的情况下显示错误？

Dans cet article, nous apprendrons comment afficher les erreurs en ligne sur la page sans afficher de boîtes d'avertissement en utilisant javascript à l'aide des propriétés innerHTML et textContent des éléments HTML DOM.

Bien que les boîtes d'alerte soient utiles pour afficher les erreurs aux utilisateurs, elles peuvent être perturbatrices et interrompre l'expérience utilisateur. Une solution plus élégante consiste à afficher l’erreur en ligne sur la page.

Voyons comment obtenir le résultat ci-dessus de deux manières

Méthode 1

Dans cette méthode, nous utiliserons l'attribut d'élément innerHTML DOM pour afficher le message d'erreur en ligne dans le formulaire.

Exemple

Comprenons la méthode ci-dessus avec un exemple.

Nom du fichier : index.html

<html lang="en">
<head>
   <title>How to display error without alert box using JavaScript?</title>
   <style>
      span {
         color: red;
      }
   </style>
</head>
<body>
   <h3>How to display error without alert box using JavaScript?</h3>
   <form name="myForm" onsubmit="return validateForm()">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br>
      <span id="nameError"></span><br>
      <input type="submit" value="Submit">
   </form>

   <script>
      function validateForm() {
         var name = document.forms["myForm"]["name"].value;
         if (name == "") {
            document.getElementById("nameError").innerHTML = "Please enter your name";
            return false;
         }
      }
   </script>
</body>
</html>

Méthode 2

Dans cette méthode, nous utiliserons 3 méthodes différentes pour afficher les messages d'erreur, ce qui implique l'utilisation de messages d'erreur en ligne, de styles CSS, de classList et de méthodes setAttributes.

Exemple

Comprenons la méthode ci-dessus avec un exemple.

Nom du fichier : index.html

<html lang="en">
<head>
   <title>How to display error without alert box using JavaScript?</title>
   <style>
      .error {
         color: red;
      }
   </style>
</head>
<body>
   <h3>How to display error without alert box using JavaScript?</h3>
   <form name="myForm" onsubmit="return validateForm()">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br>
      <span id="nameError"></span><br>
      <input type="submit" value="Submit">
   </form>

   <script>
      // Method 1: Using inline error messages
      function validateForm() {
         var name = document.forms["myForm"]["name"].value;
         if (name == "") {
            document.getElementById("nameError").innerHTML = "Please enter your name";
            return false;
         }
      }
    
      // Method 2: Using CSS styling
      function validateForm() {
         var name = document.forms["myForm"]["name"].value;
         if (name == "") {
            document.getElementById("nameError").textContent = "Please enter your name";
            document.getElementById("nameError").style.color = "red";
            return false;
         }
      }
    
      // Method 3: Using classList
      function validateForm() {
         var name = document.forms["myForm"]["name"].value;
         if (name == "") {
            document.getElementById("nameError").textContent = "Please enter your name";
            document.getElementById("nameError").classList.add("error");
            return false;
         }
      }
    
      // Method 4: Using setAttribute
      function validateForm() {
         var name = document.forms["myForm"]["name"].value;
         if (name == "") {
            document.getElementById("nameError").textContent = "Please enter your name";
            document.getElementById("nameError").setAttribute("style", "color: red;");
            return false;
         }
      }
   </script>
</body>
</html>

Conclusion

Offrez aux utilisateurs une expérience plus élégante et conviviale en affichant les erreurs en ligne sur la page plutôt qu'en utilisant une boîte d'alerte. Dans cet article, nous avons appris comment afficher un message d'erreur en ligne et sans afficher de boîte d'alerte en utilisant Javascript à l'aide de 2 méthodes. Nous utilisons respectivement les propriétés innerHTML, textContent et innerText pour obtenir le résultat souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html dom innerHTML

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment vérifier si deux nombres sont approximativement égaux en JavaScript ?Article suivant：Comment vérifier si deux nombres sont approximativement égaux en JavaScript ?

Articles Liés

Voir plus