Cara menampilkan pesan error di halaman login menggunakan javascript

Hari ini, Kami ingin berbagi dengan Anda cara menampilkan pesan kesalahan dalam javascript tanpa peringatan. Dalam posting ini kami akan menunjukkan kepada Anda bagaimana menampilkan pesan validasi di bawah setiap kotak teks menggunakan javascript, dengar cara menampilkan pesan kesalahan di jendela sembulan di javascript kami akan memberikan Anda demo dan contoh untuk diterapkan. Dalam posting ini, kita akan belajar tentang Bagaimana Mengatasi “Javascript Runtime Error Function Is Undefined”?

Bagaimana cara menampilkan kesalahan tanpa kotak peringatan menggunakan JavaScript?

Isi

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

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

Contoh 1. indeks. 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> 

_

Dengan menggunakan properti innerHTML

<!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>					 

Saya harap Anda mendapatkan ide tentang tampilan pesan kesalahan di div menggunakan javascript
Saya ingin mendapat umpan balik tentang infinityknow saya. blog com
Umpan balik, pertanyaan, atau komentar Anda yang berharga tentang artikel ini selalu diterima
Jika Anda menikmati dan menyukai posting ini, jangan lupa untuk membagikannya

Pos terkait

  1. bagaimana cara menampilkan pesan kesalahan di bawah kotak teks dalam validasi javascript?
  2. Bagaimana cara memindahkan elemen di dalam elemen lain dengan JavaScript/jQuery?
  3. Laravel 6 Menampilkan kotak Pesan
  4. Pesan Alert Toast di Komponen Angularjs
  5. bagaimana cara membuat halaman login di html dengan database?
  6. bagaimana cara menampilkan gambar di jendela popup menggunakan javascript atau jQuery?
  7. Validasi tombol radio di jquery

Menggunakan validasi javascript adalah salah satu bagian yang paling menarik dalam pengembangan web di mana Anda dapat menampilkan pesan kesalahan kepada pengguna jika formulir tidak berisi data bidang yang diperlukan. Mari tambahkan formulir terlebih dahulu sebelum mengerjakan bagian validasi

	

Your Name

Your Email

Your Phone

Your Message

Di sini, kami membuat formulir dengan menambahkan nama ke dalamnya dengan metode post yang mencegah formulir dikirim melalui url dan menambahkan fungsi javascript untuk diinisialisasi pada saat pengiriman formulir. Kami juga menambahkan id kosong di samping label untuk setiap bidang formulir tempat kami akan menampilkan pesan kesalahan. Sekarang, mari tambahkan fungsi untuk memvalidasinya

_

Di dalam fungsi validateForm() yang diprogram untuk diinisialisasi pada pengiriman formulir, kami membuat variabel individual untuk menyimpan nilai masukan dari masing-masing bidang formulir. Kemudian, kami memeriksa panjang string dari masing-masing nilai. Jika salah satu dari nilai formfield tersebut tidak memiliki teks di dalamnya, maka id kesalahan masing-masing akan menampilkan teks yang ditentukan di dalamnya dengan fungsi pre-built javascript getElementByID(). Untuk mencegah formulir dikirimkan jika terjadi kesalahan, kami menambahkan kombinasi pernyataan OR yang sangat besar untuk mengembalikan pengguna ke halaman yang sama tanpa memproses data lebih lanjut di akhir

Saya telah melakukan tutorial video terperinci tentang validasi formulir javascript yang ada di saluran youtube saya webtrickshome jika Anda tertarik untuk mempelajari lebih lanjut

Bagaimana cara menampilkan pesan kesalahan dalam JavaScript?

Kami dapat menampilkan kesalahan dengan dua metode tanpa menggunakan kotak peringatan. Sintaksis. simpul. textContent = "Beberapa pesan kesalahan" // Untuk menarik simpul perhatian.

Bagaimana cara menampilkan pesan kesalahan di dalam kotak teks menggunakan JavaScript?

Anda dapat menggunakan atribut placeholder di input untuk menyetel pesan kesalahan . $('#masukanku'). attr("placeholder", "Masukan ini memiliki kesalahan");

Bagaimana cara menampilkan pesan kesalahan?

Untuk menampilkan pesan kesalahan pada formulir, Anda perlu mempertimbangkan empat aturan dasar berikut. .
Pesan kesalahan harus singkat dan bermakna
Penempatan pesan harus dikaitkan dengan bidang
Gaya pesan harus dipisahkan dari gaya label bidang dan instruksi

Bagaimana cara menampilkan pesan kesalahan di JSP menggunakan JavaScript?

Untuk membuat halaman error JSP, kita perlu menyetel atribut page directive isErrorPage ke true, lalu kita dapat mengakses pengecualian objek implisit jsp di JSP dan menggunakannya untuk mengirimkan penyesuaian . .