Cara menampilkan pesan error warna merah di html

Pesan kesalahan validasi dirancang untuk melengkapi tema survei yang Anda gunakan. Jika Anda ingin mengubah warna teks/latar belakang pesan kesalahan validasi Anda, meskipun tidak ada metode bawaan untuk mengubah warna, Anda benar-benar dapat mengubahnya dengan sedikit CSS.  

Cara menampilkan pesan error warna merah di html

Cukup buka tab Gaya dan scroll ke bagian bawah pratinjau survei, lalu klik link untuk mengakses Editor HTML/CSS. Salin dan tempel salah satu kode CSS di bawah pada kolom di tab CSS Kustom untuk menyesuaikan pesan error yang ingin Anda ubah.  

.sg-error-message,
.sg-question-errorlist{
	background: #FFC199; /*Change background color*/
	border-left: 9px solid #FF6600; /*Change left border color*/
	color: #2c3e50; /*Change text color*/
}

latar belakang akan mengubah warna latar belakang. border-left mengubah warna border kiri. Dan warna mengubah warna teks. Untuk masing-masing ini cukup ganti kode hex (mis. g. , #FFC199) dengan warna pilihan Anda, seperti "hitam", "ungu", dll. , atau kode hex lainnya. Gunakan pemilih warna seperti ini untuk menemukan kode hex. www. pemilih warna. com

Mari pelajari cara mengubah warna pesan kesalahan dalam JavaScript saat menggunakan validasi formulir jQuery dalam tutorial ini. Validasi formulir adalah proses verifikasi data terkait yang telah dikirimkan pengguna di bidang input. Di sini, kami akan mendemonstrasikan cara menggunakan jQuery untuk memvalidasi formulir langsung dengan login, kata sandi, dan kata sandi yang dikonfirmasi

Persyaratan yang diperlukan − Dasar-dasar HTML, CSS, JavaScript, dan jQuery pasti sudah tidak asing lagi bagi Anda

metode

  • Untuk memulai, Anda harus membuat indeks. html yang berisi formulir HTML yang berisi bidang input untuk nama pengguna, alamat email, kata sandi, dan konfirmasi kata sandi. Kontrol formulir di Bootstrap akan digunakan dengan Bootstrap 4. Tambahkan "myApp. js", yang berisi kode jQuery untuk validasi formulir, setelah elemen "" penutup

  • Untuk memvalidasi seluruh formulir, buat myApp. js menggunakan kode yang disediakan di bawah ini

  • Menyembunyikan semua pesan kesalahan di myApp. js setelah dokumen selesai. Melaksanakan tugas memvalidasi setiap kolom input, termasuk nama pengguna, email, kata sandi, dan konfirmasi kata sandi

indeks. html - Desain formulir untuk input pengguna ditampilkan dalam kode HTML berikut di bawah ini


How to change the color of error message in jquery validation in JavaScript - TutorialsPoint

   
   
   
   
   
   
  
  
   
   
   
   
   
   


Welcome to TutorialsPoint!
JQUERY FORM VALIDATION ERROR MESSAGE DISPLAYS RED COLOR

Username:

Please enter the Username

Email: Please enter your valid email id

Password:

Please enter your password

Confirm Password:

Please enter your correct password

_

myApp. file js - Dalam file HTML di atas, validasi dijalankan menggunakan kode jQuery di bawah ini

// Document is ready
$(document).ready(function () {
   // Validate Username
   $("#verifyUser").hide();
   let usernameError = true;
   $("#myuserName").keyup(function () {
      validateUsername();
   });
   function validateUsername() {
      let usernameValue = $("#myuserName").val();
      if (usernameValue.length == "") {
         $("#verifyUser").show();
         usernameError = false;
         return false;
      } else if (usernameValue.length < 4 || usernameValue.length > 12) {
         $("#verifyUser").show();
         $("#verifyUser").html("The length of the username should be between 4 and 12 characters.");
         usernameError = false;
         return false;
      } else {
         $("#verifyUser").hide();
      }
   }
   
   // Validate Email
   const email = document.getElementById("email");
   email.addEventListener("blur", () => {
      let regex = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
      let s = email.value;
      if (regex.test(s)) {
      email.classList.remove("is-invalid");
      emailError = true;
      } else {
         email.classList.add("is-invalid");
         emailError = false;
      }
   });
   // Validate Password
   $("#checkPassword").hide();
   let passwordError = true;
   $("#password").keyup(function () {
      validatePassword();
   });
   function validatePassword() {
      let passwordValue = $("#password").val();
      if (passwordValue.length == "") {
         $("#checkPassword").show();
         passwordError = false;
         return false;
      }
      if (passwordValue.length < 4 || passwordValue.length > 12) {
         $("#checkPassword").show();
         $("#checkPassword").html(
         "The length of the password should be between 4 and 12 characters."
         );
         $("#checkPassword").css("color", "red");
         passwordError = false;
         return false;
      } else {
         $("#checkPassword").hide();
      }
   }
   
   // Validate Confirm Password
   $("#checkConfirmPass").hide();
   let confirmPasswordError = true;
   $("#confirmPass").keyup(function () {
      validateConfirmPassword();
   });
   function validateConfirmPassword() {
      let confirmPasswordValue = $("#confirmPass").val();
      let passwordValue = $("#password").val();
      if (passwordValue != confirmPasswordValue) {
         $("#checkConfirmPass").show();
         $("#checkConfirmPass").html("Please enter your correct password");
         $("#checkConfirmPass").css("color", "red");
         confirmPasswordError = false;
         return false;
      } else {
         $("#checkConfirmPass").hide();
      }
   }
   // Submit button
   $("#submitbtn").click(function () {
      validateUsername();
      validatePassword();
      validateConfirmPassword();
      validateEmail();
      if (
      usernameError == true &&
      passwordError == true &&
      confirmPasswordError == true &&
      emailError == true
      ) {
      return true;
      } else {
         return false;
      }
   });
});

Keluaran

Kode di atas akan memberikan output di bawah ini -

Hasil yang dihasilkan setiap kali pengguna langsung mengklik tombol kirim ditunjukkan di bawah ini

Cara menampilkan pesan error warna merah di html

Keluaran yang dihasilkan dari pengguna yang memasukkan informasi yang tidak akurat ke dalam formulir dapat dilihat di bawah ini

Cara menampilkan pesan error warna merah di html

Dalam contoh di bawah ini, mari kita pahami cara menampilkan kesalahan dalam JavaScript tanpa kotak peringatan. Kesalahan JavaScript dapat ditampilkan tanpa kotak peringatan, namun menggunakan kotak peringatan adalah praktik yang lebih umum. Tanpa menggunakan kotak peringatan, kesalahan dapat ditampilkan menggunakan cara di bawah ini

metode

Memanfaatkan properti textContent. Sederhananya, textContent digunakan untuk memperbarui konten node secara dinamis. Pengembang dapat menggunakan properti ini untuk menampilkan konten apa pun dan menarik perhatian pengguna dengan cara yang mirip dengan kotak peringatan

Bagaimana cara menampilkan pesan kesalahan dalam HTML?

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

Bagaimana cara mengubah warna pesan kesalahan di CSS?

Cukup buka tab Gaya dan gulir ke bagian bawah pratinjau survei dan klik tautan untuk mengakses Editor HTML/CSS. Salin dan tempel salah satu kode CSS di bawah ini di bidang pada tab CSS Khusus untuk menyesuaikan pesan kesalahan yang ingin Anda ubah

Apa tag HTML untuk pesan kesalahan?

< html. errors/> Tag akan mengekstrak informasi dari objek ActionErrors dan menampilkan kesalahan.

Bagaimana Anda menampilkan pesan kesalahan di bawah bidang input dalam HTML?

Untuk menyesuaikan tampilan dan teks pesan ini, Anda harus menggunakan JavaScript ; . HTML5 menyediakan API validasi batasan untuk memeriksa dan menyesuaikan status elemen formulir. var email = dokumen. getElementById("surat"); .