Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display Errors without Alert Box Using JavaScript
In this article, 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 with the help of 2 approaches
Approach 1
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>
Approach 2
In this approach, we will use 3 different methods to display error messages, which involves using inline error messages, CSS stylings, classList and setAttributes methods.
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>
.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
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. In this article, we learned how to display an error message inline and without an alert box using javascript with the help of 2 approaches. We used innerHTML, textContent, and innerText properties respectively to achieve the required result.
1K+ Views
