Here we will learn how to display errors inline on a page and without an alert box using javascript with the help of innerHTML and textContent properties of HTML DOM elements.
While alert boxes can be useful for displaying errors to users, they can be disruptive and interrupt the user experience. A more elegant solution is to display errors inline on the page.
Let’s understand how to achieve the above result :
Approach
In this approach, we will use the innerHTML DOM element property to display the error message inline in a form.
Example
Let’s understand the above approach with the help of an example.
Filename: 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>Conclusion
By displaying errors inline on the page instead of using alert boxes, one can provide a more elegant and user-friendly experience for their users.
