Browser memiliki fitur bawaan untuk validasi guna memeriksa apakah pengguna telah memasukkan data dalam format yang benar. Anda dapat mengaktifkan fitur ini menggunakan elemen dan atribut yang benar. Selain itu, Anda dapat meningkatkan validasi formulir dengan CSS dan JavaScript.
Mengapa Anda harus memvalidasi formulir?
Anda telah mempelajari di modul sebelumnya tentang cara membantu pengguna agar tidak perlu berulang kali memasukkan kembali informasi dalam formulir. Bagaimana cara Anda membantu pengguna memasukkan data yang valid?
Mengisi formulir tanpa mengetahui kolom yang wajib diisi atau batasan kolom tersebut akan membuat Anda frustrasi. Misalnya, Anda memasukkan nama pengguna dan mengirimkan formulir—hanya untuk mengetahui bahwa nama pengguna harus memiliki minimal delapan karakter.
Anda dapat membantu pengguna dengan menentukan aturan validasi dan mengomunikasikannya.
Membantu pengguna menghindari kolom wajib diisi secara tidak sengaja
Anda dapat menggunakan HTML untuk menentukan format dan batasan yang benar untuk data yang dimasukkan dalam formulir. Anda juga perlu menentukan kolom mana yang wajib diisi.
Coba kirimkan formulir ini tanpa memasukkan data apa pun.
Apakah Anda melihat pesan error yang dilampirkan ke <input> yang memberi tahu Anda bahwa kolom tersebut wajib diisi?
Hal ini terjadi karena atribut required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Anda telah mempelajari bahwa Anda dapat menggunakan lebih banyak jenis, misalnya, type="email".
Mari kita lihat email yang diperlukan <input>.
Coba kirimkan formulir ini tanpa memasukkan data apa pun. Apakah ada perbedaan dari demo sebelumnya? Masukkan nama Anda di kolom email dan coba kirimkan sekarang. Anda melihat pesan error yang berbeda. Bagaimana mungkin? Anda mendapatkan pesan yang berbeda karena nilai yang dimasukkan bukan alamat email yang valid.
Atribut required memberi tahu browser bahwa kolom tersebut wajib diisi.
Browser juga akan menguji apakah data yang dimasukkan cocok dengan format type.
Kolom email yang ditampilkan dalam contoh hanya valid jika tidak kosong dan jika data yang dimasukkan adalah alamat email yang valid.
Membantu pengguna memasukkan format yang benar
Anda telah mempelajari cara membuat sebuah kolom menjadi wajib diisi. Bagaimana Anda akan menginstruksikan browser bahwa pengguna harus memasukkan setidaknya delapan karakter untuk kolom formulir?
Cobalah demo. Setelah perubahan, Anda tidak akan dapat mengirimkan formulir jika Anda memasukkan kurang dari delapan karakter.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
Nama atributnya adalah minlength.
Tetapkan nilai ke 8 dan Anda memiliki aturan validasi yang diinginkan.
Jika Anda menginginkan hal yang sebaliknya, gunakan maxlength.
Menyampaikan aturan validasi Anda
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Pastikan semua pengguna memahami aturan validasi Anda.
Untuk itu, hubungkan kontrol formulir dengan elemen yang menjelaskan aturannya.
Untuk melakukannya, tambahkan atribut aria-describedby ke elemen dengan id formulir.
Atribut pola
Terkadang Anda ingin menentukan aturan validasi lanjutan lainnya.
Sekali lagi, Anda dapat menggunakan atribut HTML.
Ini disebut pattern, dan Anda dapat menentukan
ekspresi reguler sebagai nilainya.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Di sini, hanya huruf kecil yang diizinkan; pengguna harus memasukkan setidaknya dua karakter, dan tidak lebih dari dua puluh.
Bagaimana cara mengubah pattern agar juga mengizinkan huruf besar?
Coba sekarang.
Jawaban yang benar adalah pattern="[a-zA-Z]{2,20}".
Tambahkan gaya
Sekarang Anda telah mempelajari cara menambahkan validasi dalam HTML. Bukankah bagus jika Anda juga dapat menata gaya kontrol formulir berdasarkan status validasi? Hal ini dapat dilakukan dengan CSS.
Cara mengatur gaya pada kolom formulir yang diperlukan
Tunjukkan kepada pengguna bahwa kolom bersifat wajib sebelum mereka berinteraksi dengan formulir Anda.
Anda dapat menata gaya kolom required dengan class pseudo CSS :required.
input:required {
border: 2px solid;
}
Gaya kontrol formulir tidak valid
Apakah Anda ingat apa yang terjadi jika data yang dimasukkan oleh pengguna tidak valid? Pesan error yang dilampirkan ke kontrol formulir muncul. Bukankah bagus untuk menyesuaikan tampilan elemen saat hal ini terjadi?
Anda dapat menggunakan class semu :invalid
untuk menambahkan gaya ke kontrol formulir yang tidak valid.
Selain itu, ada juga class pseudo :valid untuk menata gaya elemen formulir yang valid.
Ada lebih banyak cara untuk menyesuaikan gaya Anda berdasarkan validasi. Dalam modul tentang CSS, Anda akan mempelajari lebih lanjut formulir gaya visual.
Validasi dengan JavaScript
Untuk lebih meningkatkan validasi formulir, Anda dapat menggunakan JavaScript Constraint Validation API.
Memberikan pesan error yang bermakna
Sebelumnya Anda telah mempelajari bahwa pesan error tidak sama di setiap browser. Bagaimana cara menampilkan pesan yang sama kepada semua orang?
Untuk mencapainya, gunakan metode
setCustomValidity()
dari Constraint Validation API.
Mari kita lihat
cara kerjanya.
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Mengkueri elemen tempat Anda ingin menetapkan pesan error kustom.
Proses peristiwa invalid dari elemen yang Anda tentukan.
Dengan begitu, Anda menyetel pesan dengan setCustomValidity().
Contoh ini menampilkan pesan Please enter your name. jika input tidak valid.
Buka demo di browser lain, dan Anda akan melihat pesan yang sama di mana saja. Sekarang, coba hapus JavaScript, lalu coba lagi. Anda akan melihat pesan error default lagi.
Ada banyak hal yang dapat Anda lakukan dengan Constraint Validation API. Anda akan mempelajari lebih lanjut penggunaan validasi dengan JavaScript di modul selanjutnya.
Cara memvalidasi secara real-time
Anda dapat menambahkan validasi real-time di JavaScript dengan memproses peristiwa onblur dari kontrol formulir,
dan segera memvalidasi input saat pengguna meninggalkan kolom formulir.
Klik kolom formulir di demo,
masukkan "web", lalu klik di tempat lain pada halaman.
Anda akan melihat pesan error native untuk minlength di bawah kolom formulir.
Pelajari lebih lanjut cara menerapkan validasi real-time dengan JavaScript di modul mendatang.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang memvalidasi formulir
Atribut apa yang Anda gunakan untuk mewajibkan kontrol formulir?
requiredneededessentialobligatoryApakah mungkin untuk menentukan pesan error Anda sendiri?
message.:invalid.<input> dengan atribut type="email" dan required dapat dikirimkan: