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.

1. 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>Soltuts.com</h1>
        <b>Display error without alert box</b>
        <br><br>
        <div class="container">
            <div>
                <label>Username:</label>
                <input type="text" size="40">
            </div>
            <div>
                <label>Phone no:</label>
                <input type="text"
                       id="number" size="40">
            <div>   <span id="error"></span> </div>
            </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>

2. Syntax:

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"
node.style.color = "red";

Example:

Run the above program to see the example

JavaScript PHP