Today, We want to share with you how to display error message in javascript without alert.In this post we will show you how to show validation message below each textbox using javascript, hear for how to show error message in popup window in javascript we will give you demo and example for implement.In this post, we will learn about How To Resolve The “Javascript Runtime Error Function Is Undefined”? with an example.

How to display error without alert box using JavaScript ?

Contents

node.textContent = "Write here some more Messages........"

// To draw some attention
node.style.color = "red";

Example 1: index.html

<!DOCTYPE html> 
<html lang="en"> 

<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport"
		content="width=device-width, 
				initial-scale=1.0"> 
	<title>Example - www.pakainfo.com</title> 
	<style> 
		h2 { 
			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> 
		<h2>Pakainfo</h2> 
		<b>Display error without alert box</b> 
		<hr/><hr/> 
		<div class="container"> 
			<div> 
				<label>Member Name:</label> 
				<input type="text" size="40"> 
			</div> 
			<div> 
				<label>Mobile no:</label> 
				<input type="text"
					id="number" size="40"> 
				<span id="error"></span> 
			</div> 
			<button type="submit"
					onclick="displayErrMsg()"> 
				Submit 
			</button> 
		</div> 
	</center> 
</body> 
<script> 
	function displayErrMsg() { 
		var error = document.getElementById("error") 
		if (isNaN(document.getElementById("number").value)) 
		{ 
			
			// Changing content and color of content 
			error.textContent = "Please enter a valid Mobile number" 
			error.style.color = "red" 
		} else { 
			error.textContent = "" 
		} 
	} 
</script> 

</html>

By using innerHTML property

<!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> 
		<h2>Pakainfo</h2> 
		<b>Display error without alert box</b> 
		<br><br> 
		<div class="container"> 
			<div> 
				<label>Uername:</label> 
				<input type="text" size="40"> 
			</div> 
			<div> 
				<label>Mobile no:</label> 
				<input type="text"
					id="number" size="40"> 
				<span id="error"></span> 
			</div> 
			<button type="submit"
					onclick="displayErrMsg()"> 
				Submit 
			</button> 
		</div> 
	</center> 
</body> 
<script> 
	function displayErrMsg() { 
		var error = document.getElementById("error") 
		if (isNaN(document.getElementById("number").value)) 
		{ 
 
			error.innerHTML = "<span style='color: red;'>"+ 
						"Please enter a valid Mobile number</span>" 
		} else { 
			error.innerHTML = "" 
		} 
	} 
</script> 

</html>

I hope you get an idea about display error message in div using javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

How to display error without alert box using JavaScript ?

Related posts: