Validasi kolom formulir umpan balik. Menggunakan variabel string lainnya. Mari buat proyek uji
Validasi adalah memeriksa nilai ditentukan oleh pengguna, dan menampilkan kesalahan yang ditemukan.
Prinsip
Tugas desainer adalah memastikan pengguna tidak melakukan kesalahan dan tidak diperlukan validasi, untuk itu:
- Batasi pemilihan nilai yang jelas-jelas salah dalam daftar: blokir nilai-nilai ini atau jangan tampilkan dalam daftar.
- Batasi masukan karakter yang tidak pantas. Jika suatu bidang hanya memerlukan angka untuk dimasukkan dan ini terlihat jelas bagi pengguna, abaikan huruf tersebut alih-alih menampilkan kesalahan. Gunakan masker di bidang yang nilainya memiliki format yang diketahui.
- Tulis petunjuk untuk mengisi formulir. Misalnya, placeholder di kolom input.
Validasi pada formulir kosong yang baru dibuka dilarang. Pengecualian adalah draf, ketika pengguna telah mengisi formulir ini, kembali ke formulir tersebut setelah beberapa waktu, dan diisi dengan kesalahan.
Jenis Validasi
Ada tiga jenis validasi: instan, saat fokus hilang, dan saat formulir diserahkan.
Semakin cepat antarmuka melaporkan kesalahan, semakin baik - lebih mudah bagi pengguna untuk kembali dan memperbaiki kesalahan tersebut.
Paling cara cepat laporkan kesalahan - validasi instan. Namun hal ini hanya mungkin terjadi jika selama proses input terlihat jelas bahwa nilainya salah. Biasanya, kesalahan seperti itu dikaitkan dengan tata letak keyboard yang salah (Sirilik, bukan Latin) atau memasukkan huruf ke dalam bidang numerik (TIN, KPP, dll.). Untuk kasus ini, kami menggunakan bidang dengan topeng: memasukkan karakter yang tidak sesuai ke dalamnya diblokir. Oleh karena itu, di antarmuka kami hanya ada dua jenis validasi:
- karena kehilangan fokus- jenis validasi utama
- setelah menyerahkan formulir- untuk kasus di mana validasi berdasarkan kehilangan fokus tidak mungkin dilakukan.
Validasi kehilangan fokus
Kapan harus digunakan
Bagaimana cara kerjanya
Jangan memvalidasi kolom yang kosong karena kehilangan fokus - jangan tampilkan kesalahan jika kolom tidak diisi, mungkin pengguna akan kembali dan mengisi kolom tersebut nanti. Dalam kasus seperti ini, Anda hanya dapat menampilkan kesalahan setelah mengirimkan formulir.
Validasi diaktifkan segera setelah kehilangan fokus jika nilai di kolom terisi. Jika kesalahan ditemukan, bidang tersebut disorot dengan warna merah. Fokus tidak otomatis kembali ke bidang ini:
Teks kesalahan muncul di tooltip ketika bidang menerima arahan atau fokus:
Bidang kesalahan harus tetap disorot jika menerima fokus, nilainya tidak diperbaiki, dan kemudian kehilangan fokus.
Sorotan merah dihapus dari bidang segera setelah pengguna mulai memperbaiki nilai yang salah.
Validasi saat mengirimkan formulir
Kapan harus digunakan
Gunakan jenis validasi ini ketika bidang tidak dapat divalidasi karena kehilangan fokus. Misalnya, untuk memeriksa apakah kolom wajib diisi.
Bagaimana cara kerjanya
Pemeriksaan terjadi setelah pengguna menekan tombol kirim: semua bidang dengan kesalahan pada formulir disorot, halaman bergulir ke bidang pertama yang mengalami kesalahan, fokus berpindah ke bidang ini, kursor berpindah ke akhir baris, dan keterangan alat dengan petunjuk muncul di sebelah bidang.
Saat menggulir ke bidang pertama dari batas atas jendela ke bidang kesalahan, indentasi 50 px tetap ada.
Memblokir tombol kirim
Dalam formulir kecil, alih-alih memeriksa apakah kolom wajib diisi, Anda dapat memblokir tombol kirim formulir. Gunakan perilaku ini jika sudah jelas mengapa tombol kirim formulir berwarna abu-abu. Misalnya pada form login:
Setelah semuanya terisi bidang yang diperlukan- tombol menjadi aktif. Jika setelah ini pengguna menghapus nilai di salah satu bidang, tombol tersebut akan menjadi tidak aktif lagi.
Pesan kesalahan
Kesalahan dapat dilaporkan dengan dua cara:
Tipe alat
Bagaimana cara kerjanya
Keterangan alat dengan keterangan alat muncul dalam dua kasus:
- Saat menunjuk ke bidang yang mengalami kesalahan.
- Saat bidang dengan kesalahan menerima fokus.
Tooltip hover tumpang tindih dengan tooltip fokus.
Tooltip dapat muncul di atas atau di sebelah kanan kontrol dengan kesalahan, sehingga tidak tumpang tindih dengan informasi berguna:
Keseragaman tingkah laku dan penampilan
Tampilkan keterangan alat di sebelah kanan bidang. Jika dalam kasus ini keduanya tumpang tindih dengan konten penting di halaman, tampilkan tooltips di atas. Pertahankan konsistensi, tapi ingat bahwa konten lebih penting daripada konten.
Teks merah di halaman
Bagaimana cara kerjanya
Teks kesalahan berwarna merah muncul segera setelah kesalahan terjadi dan bidang disorot, dan menghilang segera setelah sorotan bidang menghilang.
Tampilkan teks kesalahan di sebelah kanan jika ada ruang pada formulir dan pesannya sendiri pendek. Dengan cara ini Anda tidak perlu memperluas formulir untuk menampilkan kesalahan.
Jika tidak ada ruang untuk teks di sebelah kanan bidang, luaskan formulir dan tampilkan pesan di bawah bidang.
Pada formulir yang lebih kompleks, tampilkan pesan kesalahan di tooltip.
Validasi bidang dependen
Bidang dependen adalah bidang yang nilainya bergantung satu sama lain.
Kami menunjukkan kesalahan yang terkait dengan pelanggaran ketergantungan bidang setelah mengirimkan formulir. Misalnya NPWP dan pos pemeriksaan. Jika pengguna menentukan TIN 10 digit dan membiarkan kolom pos pemeriksaan kosong, setelah mengirimkan formulir, kolom pos pemeriksaan yang kosong akan disorot.
NPWP dapat terdiri dari dua jenis:
- 10 digit kamu badan hukum
- 12 digit untuk pengusaha perorangan.
Jika pengguna menunjukkan NPWP 12 digit, maka organisasi tersebut merupakan pengusaha perorangan dan tidak memiliki pos pemeriksaan, sehingga tidak perlu mengisi kolom pos pemeriksaan. Begitu pula sebaliknya, jika pos pemeriksaan sudah diisi, tetapi NPWP 12 digit, bisa jadi NPWP yang dicantumkan salah.
Penyorotan bidang dependen menghilang segera setelah pengguna mulai mengoreksi nilai di salah satu bidang ini.
Jika format nilai salah saat mengisi bidang dependen, laporkan kesalahan tersebut saat Anda kehilangan fokus. Misalnya, pengguna memasukkan 3 digit pada kolom TIN dan menghapus fokus. Bidang seperti itu harus segera disorot.
Contoh
Ada formulir dengan 5 bidang:
- Nama organisasi- teks sederhana, wajib
- TIMAH- 10 atau 12 digit, periksa checksum karena kehilangan fokus, wajib
- pos pemeriksaan- 9 digit dengan verifikasi checksum kehilangan fokus, wajib jika NPWP terdiri dari 10 digit
- E-mail- alamat email, periksa kehilangan fokus menggunakan topeng [dilindungi email], opsional
- Telepon- format internasional, periksa hilangnya fokus menggunakan masker +00000000000, wajib diisi
Dari penulis: Saat Anda mengumpulkan informasi dari pengguna menggunakan formulir, setidaknya menggunakan beberapa jenis validasi data adalah suatu keharusan. Jika Anda tidak memperhatikan saat ini, maka hal ini dapat mengakibatkan hilangnya pelanggan, rusaknya data pada database (DB) bahkan munculnya celah keamanan pada website Anda. Secara historis, validasi formulir selalu memusingkan. Ini lebih mudah dilakukan di sisi server berkat kerangka kerja lengkap yang akan melakukan segalanya untuk Anda, tetapi di sisi klien hal ini paling sering berakhir. menggunakan JavaScript perpustakaan yang membutuhkan banyak upaya untuk diintegrasikan.
Untungnya, HTML5 menyediakan beberapa fitur yang dapat menyelesaikan sebagian besar masalah validasi formulir Anda. Formulir di HTML5 kini memiliki dukungan bawaan untuk validasi melalui penggunaan atribut khusus dan tipe elemen masukan baru. Ini juga memberi Anda kontrol lebih besar atas penataan formulir Anda melalui CSS.
Lihatlah contoh validasi formulir online dan baca terus untuk mengetahui contekan singkat tentang dasar-dasar validasi formulir dalam HTML5.
Jenis Elemen Input Khusus
HTML5 memperkenalkan beberapa tipe elemen masukan baru. Mereka dapat digunakan untuk membuat kolom masukan yang hanya akan menerima jenis data tertentu. Berikut tipe-tipe baru yang muncul di HTML5:
Untuk menggunakan salah satu tipe baru, tentukan namanya sebagai nilai atribut type:
< input type = "email" / > |
Jika browser tidak mendukung tipe ini elemen input, maka elemen saat ini akan berperilaku seperti kolom input teks biasa. Mungkin juga bermanfaat bagi Anda untuk mengetahui bahwa beberapa jenis bidang (seperti "email" dan "telp") menghasilkan kolom terbuka perangkat seluler keyboard khusus dengan serangkaian tombol terbatas daripada tata letak QWERTY penuh. Lagi informasi rinci Anda dapat menemukan informasi tentang semua jenis elemen input di situs web MDN -.
Bidang yang wajib diisi
Cukup menambahkan atribut "wajib" ke elemen input, pilih, atau textarea akan memberi tahu browser bahwa ia memilikinya bidang ini pasti ada maksudnya. Anggap saja seperti tanda bintang merah* yang kita lihat di sebagian besar formulir pendaftaran.
< input type = "checkbox" name = "terms" required > |
Masalahnya di sini adalah hampir semua informasi akan memenuhi persyaratan ini, misalnya, Anda dapat lolos validasi hanya dengan memberi spasi (kami akan menunjukkan cara menghindarinya).
Saat Anda menentukan atribut yang diperlukan pada bidang seperti email atau url, browser mengharapkan adanya pola tertentu yang dapat digunakan untuk memvalidasi informasi, namun validasi ini sangat lunak dan meleset. alamat email seperti “z@zz” (baca terus untuk mengetahui cara mengatasinya).
Batasan
Kita dapat menetapkan batasan dasar seperti panjang maksimum atau minimal dan nilai maksimum untuk bidang numerik. Untuk membatasi panjang elemen input atau textarea, gunakan atribut "maxlength". Hal ini dilakukan agar secara umum tidak mungkin memasukkan string yang lebih panjang dari nilai atribut “maxlength”. Jika Anda mencoba memasukkan garis yang melebihi batas, formulir akan terpotong begitu saja.
Pendaftaran
Kelas semu CSS3 memungkinkan kita menata bidang formulir apa pun bergantung pada statusnya. Berikut adalah kelas semunya:
Ini berarti bidang wajib Anda mungkin terlihat berbeda, bidang opsional Anda terlihat berbeda, dan seterusnya. Dalam demo kami, kami menggabungkan pemilih "valid" dan "tidak valid" dengan kelas semu "fokus" untuk mewarnai bidang formulir dengan warna merah dan warna hijau, saat pengguna memilihnya dan mulai mengetik sesuatu ke dalamnya.
masukan:fokus:tidak valid, area teks:fokus:tidak valid( perbatasan:solid 2px #F5192F; ) masukan:fokus:valid, area teks:fokus:valid( perbatasan:solid 2px #18E109; warna latar:#fff; )
masukan: fokus: tidak valid, area teks : fokus : tidak valid ( batas : solid 2px #F5192F; masukan: fokus: valid, area teks : fokus : valid ( batas : padat 2px #18E109; latar belakang - warna : #fff; |
Keterangan alat
Anda mungkin memperhatikan bahwa ketika Anda mencoba mengirimkan formulir yang salah diisi, tooltips muncul. Dengan menyetel atribut "judul" ke bidang kami, kami dapat menambahkan petunjuk tambahan tentang nilai apa yang diharapkan oleh aturan validasi kami dari pengguna.
Harap dicatat bahwa browser yang berbeda menampilkan tooltips secara berbeda. DI DALAM peramban Chrome arti atribut judul akan muncul di bawah teks pesan kesalahan utama dan akan berukuran lebih kecil daripada teks kesalahan. peramban Firefox tidak akan menampilkan teks Anda untuk tooltip sama sekali kecuali Anda menggunakan atribut "pattern", yang akan digunakan untuk informasi pola.
Anda juga dapat menetapkan nilai spesifik yang diperlukan. Seperti email atau nomor.
Bidang ini wajib diisi dan informasi yang dimasukkan akan diperiksa kesesuaiannya dengan alamat e-mail. Mari tingkatkan UX:
- Beri tahu pengguna tentang format yang diperlukan saat fokus berada di kolom input
- Kami akan mengingatkannya jika data yang dimasukkan tidak valid
Tapi juga... jangan tampilkan tooltip apa pun jika kolomnya kosong. Dan jangan menganggapnya salah diisi. Hal ini dapat menimbulkan perasaan mengganggu dan hanya akan mengganggu. Untuk mematuhi rekomendasi ini, kita harus mencari tahu apakah kolom tersebut kosong atau tidak.
Memeriksa apakah field tersebut terisi atau tidak
Kami ingin melakukan trik dengan :sah Dan :tidak sah, namun kami tidak ingin mendahului kurva dan membuat kolom tersebut menjadi tidak valid sebelum diisi.
Apakah ada pemilih CSS untuk memeriksa apakah suatu bidang kosong? Sebenarnya tidak! Anda mungkin memikirkannya :kosong, tapi kamu salah. Kelas semu ini dirancang untuk memeriksa situasi ketika elemen tidak mengandung apa pun. Bidang masukan sudah kosong secara default.
Caranya adalah dengan memeriksa bidang untuk visibilitas atribut pengganti:
CSSmasukan:tidak(:ditampilkan di tempat penampung) ( )
Kita tidak menggunakan placeholder dalam contoh kita, namun aturan ini akan berfungsi jika kita menentukan nilai spasi tunggal:
:ditampilkan sebagai placeholder sangat berguna bagi kami! Ini secara umum rahasia Pemilih yang memungkinkan Anda memeriksa apakah suatu bidang memiliki nilai atau tidak.
IE dan Firefox belum mendukungnya, sehingga membuat segalanya menjadi lebih sulit. Biasanya penyelamatnya adalah fitur baru @mendukung, Tetapi…
CSS/* Ini tidak akan berhasil */@supports (input: ditampilkan di placeholder) (
masukan:tidak(:ditampilkan di tempat penampung) (
}
}
Anda tidak dapat menggunakan @mendukung untuk penyeleksi, hanya properti/nilai (misalnya @supports (display: flex)).
Periksa placeholder kapan bantuan JavaScript cukup mudah:
JavaScript var i = dokumen.createElement('input');if ('placeholder' di i) ( )
Tapi sepertinya itu bukan yang terbaik dengan cara yang sederhana imitasi :ditampilkan sebagai placeholder. Oleh karena itu...mungkin sebaiknya tunggu saja dukungan di semua browser.
Bayangkan dukungan sudah tersebar luas dan kita lihat seperti apa jadinya...
SCSS bentuk ( > div (> masukan
> masukan
>masukan(
// Saat kolom masukan...
// 1. TIDAK kosong
// 2. TIDAK fokus
// 3. TIDAK valid &:invalid:not(:focus):not(:placeholder-shown) (
// Tampilkan latar belakang pengingat: merah muda;
& + label (
opacity: 0;
}
}
// Ketika bidang yang tidak valid mendapatkan fokus (dan masih belum kosong) &:invalid:focus:not(:placeholder-shown) (
// Tampilkan pengingat yang lebih persisten
& ~ .persyaratan (
tinggi maksimal: 200 piksel;
bantalan: 0 30px 20px 50px;
}
}
}
// ~
//