How to display error without alert box using JavaScript ?

Errors in JavaScript can be displayed without the use of alert boxes but using the alert box is the traditional way to do that. We can show errors with two methods without using the alert box.

Method 1: By using textContent property. The textContent is basically used to change the content of any node dynamically. With the help of this property we can display any content and draw user’s attention just like alert boxes

  • Syntax:
    node.textContent = "Some error message"
    
    // To draw attention
    node.style.color = "red";  
    
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>Demo</title>
        <style>
            h1 {
                color: green;
            }
            .container {
                padding: 15px;
                width: 400px;
            }
              
            label,
            input {
                margin-bottom: 10px;
            }
              
            button {
                float: right;
                margin-right: 10px;
                background-color: green;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <b>Display error without alert box</b
            <br><br>
            <div class="container">
                <div>
                    <label>Uername:</label>
                    <input type="text" size="40">
                </div>
                <div>
                    <label>Phone no:</label>
                    <input type="text"
                           id="number" size="40">
                    <span id="error"></span>
                </div>
                <button type="submit" 
                        onclick="errorMessage()">
                    Submit
                </button>
            </div>
        </center>
    </body>
    <script>
        function errorMessage() {
            var error = document.getElementById("error")
            if (isNaN(document.getElementById("number").value)) 
            {
                  
                // Changing content and color of content
                error.textContent = "Please enter a valid number"
                error.style.color = "red"
            } else {
                error.textContent = ""
            }
        }
    </script>
      
    </html>

    chevron_right

    
    

  • Output:

Method 2: By using innerHTML property. The innerHTML can be used to changed selected node’s HTML. Instead of textContent and innerHTML, one can also use innerText which will lead to same output.



  • Syntax:
    node.innerHTML = "<span style='color: red;'>
                        Please enter a valid number
                      </span>"
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, 
                    initial-scale=1.0">
        <title>Demo</title>
        <style>
            h1 {
                color: green;
            }
            .container {
                padding: 15px;
                width: 400px;
            }
              
            label,
            input {
                margin-bottom: 10px;
            }
              
            button {
                float: right;
                margin-right: 10px;
                background-color: green;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <b>Display error without alert box</b
            <br><br>
            <div class="container">
                <div>
                    <label>Uername:</label>
                    <input type="text" size="40">
                </div>
                <div>
                    <label>Phone no:</label>
                    <input type="text"
                        id="number" size="40">
                    <span id="error"></span>
                </div>
                <button type="submit"
                        onclick="errorMessage()">
                    Submit
                </button>
            </div>
        </center>
    </body>
    <script>
        function errorMessage() {
            var error = document.getElementById("error")
            if (isNaN(document.getElementById("number").value)) 
            {
      
                // Changing HTML to draw attention
                error.innerHTML = "<span style='color: red;'>"+
                            "Please enter a valid number</span>"
            } else {
                error.innerHTML = ""
            }
        }
    </script>
      
    </html>                    

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.