how to display error message in javascript without alert?

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 ?

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.

Read Also:  PHP Laravel 5.6 Delete Multiple Rows using Checkbox

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Image Upload and Crop in jQuery Example
  2. Read Also:  PHP Laravel CKEditor Canned Responses using jquery
  3. Read Also:  Image Overlay Hover Effects With CSS3 Transitions
  4. Read Also:  how to show error messages below the textbox in javascript validation?
  5. Read Also:  how to insert data using ajax in laravel with datatables?
  6. Read Also:  string length javascript
  7. Read Also:  How To Create bootstrap 4 vertical tabs?
  8. Read Also:  How to fetch image from database in php ?
  9. Read Also:  Get Parent Elements With CSS and jQuery
  10. Read Also:  How To Create vertical line between columns using bootstrap?