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.
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 - TutorialsPointWelcome 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
Keluaran yang dihasilkan dari pengguna yang memasukkan informasi yang tidak akurat ke dalam formulir dapat dilihat di bawah ini
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