Home > Article > Web Front-end > How to display an error without an alert box using JavaScript?

How to display an error without an alert box using JavaScript?

WBOYforward: 2023-09-12 22:37:021459browse

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

In this article, we will learn how to display errors inline on the page without showing an alert box using javascript with the help of innerHTML and textContent properties of HTML DOM elements.

While alert boxes are useful for displaying errors to users, they can be disruptive and interrupt the user experience. A more elegant solution is to display the error inline on the page.

Let’s understand how to achieve the above result by two methods

method 1

In this approach, we will use the innerHTML DOM element attribute to display the error message inline in the form.

Example

Let us understand the above method through an example.

File name: 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>

Method 2

In this method, we will use 3 different methods to display error messages, which involves using inline error messages, CSS styles, classList, and setAttributes methods.

Example

Let us understand the above method through an example.

File name: 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>

in conclusion

By displaying errors inline on the page rather than using an alert box, you can provide the user with a more elegant and user-friendly experience. In this article, we learned how to display error message inline and without showing alert box using javascript with the help of 2 methods. We use innerHTML, textContent and innerText properties respectively to achieve the desired result.

The above is the detailed content of How to display an error without an alert box using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html dom innerHTML

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to check if two numbers are approximately equal in JavaScript?Next article：How to check if two numbers are approximately equal in JavaScript?

See more

How to display an error without an alert box using JavaScript?

method 1

Example

File name: index.html

Method 2

Example

File name: index.html

in conclusion

Related articles