Formulir HTML memiliki metode bawaan untuk memvalidasi masukan formulir dan kontrol lainnya sesuai dengan aturan yang telah ditentukan seperti membuat masukan diperlukan, menetapkan batasan minimum dan maksimum pada bilah gulir, atau membuat gaya pada masukan email untuk memverifikasi pemformatan yang benar. HTML dan browser asli memberi kita banyak fitur “gratis” yang tidak memerlukan skrip rumit untuk memvalidasi pengiriman formulir.
Dan jika ada sesuatu yang tidak divalidasi dengan benar? Kami mendapatkan pesan kesalahan “gratis” untuk ditampilkan kepada orang yang menggunakan formulir.
Pesan-pesan ini biasanya cukup untuk menyelesaikan pekerjaan, namun kita mungkin perlu mengganti pesan-pesan ini jika kita memerlukan konten kesalahan yang lebih spesifik — terutama jika kita perlu menangani konten terjemahan lintas-browser. Begini cara kerjanya.
Batasan API
Constraints API digunakan untuk mengganti pesan validasi formulir HTML default dan memungkinkan kita menentukan pesan kesalahan kita sendiri. Chris Ferdinandi bahkan membahas masalah ini di sini di CSS-Tricks dengan sangat rinci.
Singkatnya, Constraints API dirancang untuk memberikan kontrol atas elemen masukan. API dapat dipanggil pada elemen masukan individual atau langsung dari elemen formulir.
Sebagai contoh, katakanlah formulir masukan sederhana inilah yang sedang kita kerjakan:
<form id="myForm">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required>
<button id="btn" type="submit">Submit</button>
</form>Kita dapat mengatur pesan kesalahan kita sendiri dengan mengambilnya <input> Barang dan pemanggilan setCustomValidity() metode di atasnya sebelum meneruskan pesan khusus ke sana:
const fullNameInput = document.getElementById("fullName");
fullNameInput.setCustomValidity("This is a custom error message");Saat Anda mengklik tombol kirim, pesan yang dipilih akan muncul, bukan pesan default.
Terjemahkan pesan validasi formulir kustom
Salah satu kasus penggunaan terpenting untuk menyesuaikan pesan kesalahan adalah menangani internasionalisasi dengan lebih baik. Ada dua cara utama untuk melakukan pendekatan ini. Ada cara lain untuk mencapai hal ini, tapi yang saya bahas di sini adalah cara yang menurut saya paling jelas.
Metode 1: Manfaatkan pengaturan bahasa browser
Cara pertama adalah dengan menggunakan pengaturan bahasa browser. Kita bisa mendapatkan pengaturan bahasa dari browser dan kemudian memeriksa apakah kita mendukung bahasa tersebut atau tidak. Jika kami mendukung bahasanya, kami dapat mengembalikan pesan yang diterjemahkan. Jika kami tidak mendukung bahasa spesifik tersebut, kami akan memberikan respons alternatif.
Melanjutkan dengan HTML dari sebelumnya, kami akan membuat objek terjemahan untuk memuat bahasa pilihan Anda (di dalam tag skrip). Dalam hal ini, objek mendukung bahasa Inggris, Swahili, dan Arab.
const translations = {
en: {
required: "Please fill this",
email: "Please enter a valid email address",
},
sw: {
required: "Sehemu hii inahitajika",
email: "Tafadhali ingiza anwani sahihi ya barua pepe",
},
ar: {
required: "هذه الخانة مطلوبه",
email: "يرجى إدخال عنوان بريد إلكتروني صالح",
}
};Selanjutnya, kita perlu mengekstrak label objek dan mencocokkannya dengan bahasa browser.
// the translations object
const supportedLangs = Object.keys(translations);
const getUserLang = () => {
// split to get the first part, browser is usually en-US
const browserLang = navigator.language.split('-')[0];
return supportedLangs.includes(browserLang) ? browserLang :'en';
};
// translated error messages
const errorMsgs = translations[getUserLang()];// form element
const form = document.getElementById("myForm");// button elementconst btn = document.getElementById("btn");// name input
const fullNameInput = document.getElementById("fullName");// wrapper for error messaging
const errorSpan = document.getElementById("error-span");
// when the button is clicked…
btn.addEventListener("click", function (event) { // if the name input is not there…
if (!fullNameInput.value) { // …throw an error
fullNameInput.setCustomValidity(errorMsgs.required); // set an .error class on the input for styling
fullNameInput.classList.add("error");
}
});Di Sini getUserLang() Fungsi ini membandingkan dan mengembalikan bahasa yang didukung browser atau bahasa alternatif dalam bahasa Inggris. Jalankan contohnya dan pesan kesalahan khusus Anda akan muncul saat Anda mengklik tombol.
Metode 2: Tetapkan bahasa pilihan di penyimpanan lokal
Cara kedua untuk melakukannya adalah dengan Pengaturan bahasa yang ditentukan pengguna localStorage. Dengan kata lain, kami meminta orang tersebut untuk memilih bahasa pilihannya terlebih dahulu <select> Item berisi dapat dipilih <option> Tag. Setelah pilihan dibuat, kami menyimpan preferensi mereka localStorage Jadi kita bisa merujuknya.
<label for="languageSelect">Choose Language:</label>
<select id="languageSelect">
<option value="en">English</option>
<option value="sw">Swahili</option>
<option value="ar">Arabic</option>
</select>
<form id="myForm">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required>
<span id="error-span"></span>
<button id="btn" type="submit">Submit</button>
</form>dengan <select> Sebagai gantinya, kita bisa membuat skrip yang memeriksa localStorage Ia menggunakan preferensi tersimpan untuk mengembalikan pesan verifikasi khusus yang diterjemahkan:
// the <select> element
const languageSelect = document.getElementById("languageSelect");
// the <form> element
const form = document.getElementById("myForm");
// the button element
const btn = document.getElementById("btn");
// the name input
const fullNameInput = document.getElementById("fullName");
const errorSpan = document.getElementById("error-span");
// translated custom messages
const translations = {
en: {
required: "Please fill this",
email: "Please enter a valid email address",
},
sw: {
required: "Sehemu hii inahitajika",
email: "Tafadhali ingiza anwani sahihi ya barua pepe",
},
ar: {
required: "هذه الخانة مطلوبه",
email: "يرجى إدخال عنوان بريد إلكتروني صالح",
}
};
// the supported translations object
const supportedLangs = Object.keys(translations);
// get the language preferences from localStorage
const getUserLang = () => {
const savedLang = localStorage.getItem("preferredLanguage");
if (savedLang) return savedLang;
// provide a fallback message
const browserLang = navigator.language.split('-')[0];
return supportedLangs.includes(browserLang) ? browserLang : 'en';
};
// set initial language
languageSelect.value = getUserLang();
// update local storage when user selects a new language
languageSelect.addEventListener("change", () => {
localStorage.setItem("preferredLanguage", languageSelect.value);
});
// on button click
btn.addEventListener("click", function (event) {
// take the translations
const errorMsgs = translations[languageSelect.value];
// ...and if there is no value in the name input
if (!fullNameInput.value) {
// ...trigger the translated custom validation message
fullNameInput.setCustomValidity(errorMsgs.required);
// set an .error class on the input for styling
fullNameInput.classList.add("error");
}
});Skrip menetapkan nilai awal untuk opsi yang dipilih saat ini, dan menyimpan nilai tersebut localStorageKemudian ambil dari localStorage Sesuai kebutuhan. Pada saat yang sama, skrip memperbarui opsi yang dipilih pada setiap peristiwa perubahan yang dipicu oleh <select> item, sambil mempertahankan cadangan asli untuk memastikan pengalaman pengguna yang baik.
Jika kita membuka DevTools, kita akan melihat bahwa nilai pilihan orang tersebut tersedia localStorage Saat Anda memilih preferensi bahasa.
kesimpulan
Dan dengan itu, kita sudah selesai! Saya harap tip singkat ini bermanfaat bagi Anda. Saya tahu saya berharap saya mengetahuinya beberapa waktu lalu ketika saya mencoba mencari cara menggunakan Constraints API. Ini adalah salah satu hal yang Anda tahu mungkin dilakukan di web, namun mungkin sulit untuk menemukan cara melakukannya.
Referensi
- Seri Validasi Model (Chris Ferdinandi)
- Temui Anggota Panitia Seleksi Kelas Palsu (Chris Cowher)
- Pemeriksaan Kendala (MDN)
- Validasi formulir sisi klien (MDN)
Dua metode untuk membuat pesan lokal khusus untuk formulir HTML yang awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.