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?
Di modul sebelumnya, Anda telah mempelajari cara membantu pengguna agar tidak harus berulang kali masukkan kembali informasi di formulir. Bagaimana Anda dapat membantu pengguna memasukkan data yang valid?
Sangat menjengkelkan saat mengisi formulir tanpa mengetahui isian mana yang wajib diisi, atau batasan {i>field-field<i} tersebut. Misalnya, Anda memasukkan nama pengguna dan mengirimkan formulir—hanya untuk mengetahui bahwa nama pengguna harus memiliki setidaknya delapan karakter.
Anda bisa membantu pengguna mengenai hal tersebut dengan menentukan aturan validasi dan mengomunikasikannya.
Membantu pengguna agar tidak melewatkan 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 harus menentukan kolom 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 ini wajib diisi?
Hal ini terjadi karena atribut required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Anda sudah mempelajari bahwa Anda dapat menggunakan banyak jenis lainnya, 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? Sekarang masukkan nama Anda di kolom email dan coba kirimkan. Anda melihat pesan error lain. 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 kolom menjadi wajib diisi. Bagaimana Anda menginstruksikan browser bahwa pengguna harus memasukkan setidaknya delapan karakter untuk kolom formulir?
Cobalah demonya. 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 atribut ini adalah minlength.
Setel nilai ke 8 dan Anda memiliki aturan validasi yang diinginkan.
Jika Anda menginginkan hal sebaliknya, gunakan maxlength.
Komunikasikan 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 aturan.
Untuk melakukannya, tambahkan atribut aria-describedby ke elemen dengan id formulir.
Atribut pola
Terkadang Anda ingin mendefinisikan aturan validasi yang lebih canggih.
Sekali lagi, Anda dapat menggunakan atribut HTML.
Ini disebut pattern, dan Anda bisa menentukan
ekspresi reguler sebagai nilai.
<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 diperbolehkan; pengguna harus memasukkan paling sedikit dua karakter, dan tidak lebih dari dua puluh karakter.
Bagaimana cara Anda mengubah pattern agar juga mengizinkan huruf besar?
Coba sekarang.
Jawaban yang benar adalah pattern="[a-zA-Z]{2,20}".
Menambahkan gaya
Anda kini 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 menata gaya kolom formulir yang wajib diisi
Tunjukkan kepada pengguna bahwa kolom bersifat wajib sebelum mereka berinteraksi dengan formulir Anda.
Anda dapat menata gaya kolom required dengan class semu 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 akan muncul. Bukankah bagus untuk menyesuaikan tampilan elemen saat ini terjadi?
Anda dapat menggunakan pseudo-class :invalid
untuk menambahkan gaya ke kontrol formulir yang tidak valid.
Selain itu, ada juga class semu :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 tentang formulir gaya.
Validasi dengan JavaScript
Untuk lebih meningkatkan validasi formulir, Anda dapat menggunakan JavaScript Constraint Validation API.
Menyediakan pesan error yang bermakna
Anda telah mempelajari sebelumnya bahwa pesan error tidak sama di setiap browser. Bagaimana cara menampilkan pesan yang sama kepada semua orang?
Untuk melakukannya, gunakan
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.');
});
Buat kueri elemen tempat Anda ingin menetapkan pesan error kustom.
Memproses peristiwa invalid dari elemen yang Anda tentukan.
Di sana, Anda menyetel pesan dengan setCustomValidity().
Contoh ini menampilkan pesan Please enter your name. jika input tidak valid.
Buka demo di browser yang berbeda, Anda akan melihat pesan yang sama di semua tempat. Sekarang, coba hapus JavaScript dan coba lagi. Anda akan melihat pesan error default lagi.
Masih banyak lagi yang dapat Anda lakukan dengan Constraint Validation API. Anda akan menemukan penjelasan yang terperinci tentang cara menggunakan validasi dengan JavaScript di modul selanjutnya.
Cara melakukan validasi secara real time
Anda dapat menambahkan validasi real-time di JavaScript dengan memproses peristiwa onblur dari kontrol formulir,
dan langsung memvalidasi input saat pengguna meninggalkan kolom formulir.
Klik kolom formulir di demo,
masukkan "web" dan 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 validasi formulir
Atribut apa yang Anda gunakan untuk mewajibkan kontrol formulir?
requiredneededessentialobligatoryApakah mungkin untuk mendefinisikan pesan kesalahan Anda sendiri?
message.:invalid.<input> dengan type="email" dan atribut required dapat dikirimkan: