Memahami Apa itu Validasi Formulir HTML5 dan Label Input Mengambang

Menerapkan validasi formulir memainkan peran penting dalam mencegah pengguna jahat memasukkan teks omong kosong ke dalam bidang formulir. Selain itu, ini membatasi pengguna yang tidak berpengalaman agar tidak salah memasukkan informasi yang salah dalam formulir.

Tentu saja, Anda tidak ingin mengumpulkan data yang salah dari pengguna dengan cara yang tidak aman. Jadi, sangat penting bagi Anda untuk menentukan aturan validasi untuk formulir.

Selama bertahun-tahun, kami telah menggunakan kode JavaScript yang kompleks dan TL;DR (yaitu Terlalu lama; tidak membaca) untuk mengimplementasikan validasi formulir di sisi klien. Untungnya, dengan rilis "validasi formulir HTML5" sekarang kita dapat menambahkan validasi ke formulir dengan JavaScript minimal.

Meskipun rilis versi HTML terbaru menawarkan beberapa manfaat, namun, yang paling penting adalah bahwa ia datang dengan banyak bidang input baru dan atribut penting untuk memvalidasi formulir tanpa perlu menulis kode validasi JS (kependekan dari JavaScript) yang rumit.

Tetapi ingat bahwa pengguna dapat dengan mudah menjadi frustrasi ketika mengisi formulir, terutama ketika mereka mengetahui bahwa data yang mereka masukkan salah dapat meningkatkan frustrasi mereka ke tingkat yang lebih besar. Namun berkat HTML5, menambahkan label input mengambang dapat memvalidasi data formulir pada saat yang sama ketika pengguna mengisi formulir. Dengan cara ini pengguna akan segera tahu jika mereka membuat kesalahan di bidang input.

Misalnya, di bawah ini adalah gambar yang diposting di Dribble oleh Matt Smith yang menunjukkan cara kerja pola label mengambang saat diterapkan ke formulir:

Posting ini mencakup bagaimana Anda dapat menerapkan label input mengambang saat menambahkan validasi ke formulir HTML5.

Tapi Sebelum Anda Mulai

Sebagian besar dari Anda mungkin ingin mengetahui proses memvalidasi formulir HTML5 terlebih dahulu. Lagi pula, tidak semua dari Anda mungkin memiliki pengalaman dalam menulis kode validasi untuk formulir HTML5. Juga, mungkin Anda tidak akan memiliki pengetahuan tentang bidang input dan atribut yang baru diperkenalkan di HTML5.

Ikhtisar Rinci Validasi Formulir HTML5

Saat Anda berencana untuk memvalidasi formulir, Anda disarankan untuk memulai dengan validasi sisi server terlebih dahulu. Dan, jika Anda seorang desainer web yang baik, lanjutkan dengan menambahkan validasi sisi klien, membantu pengguna Anda mendapatkan umpan balik instan apakah mereka mengisi formulir dengan data yang benar atau tidak. Misalnya, memberikan umpan balik langsung kepada pengguna saat mereka memasukkan data di bidang alamat email akan memberi tahu mereka bahwa alamat email yang mereka masukkan valid.

Salah satu fitur HTML5 yang hebat adalah membantu mengimplementasikan validasi sisi klien tanpa bergantung pada skrip. Sebaliknya Anda dapat melakukan tugas tersebut dengan memanfaatkan "atribut validasi" pada elemen formulir Anda. Yang terpenting, Anda hanya perlu menambahkan atribut "wajib" untuk bidang input sementara sisanya ditangani oleh browser Anda.

Berikut adalah contoh yang akan menjelaskan penggunaan atribut yang diperlukan untuk menambahkan validasi ke bidang input:

[php]
Nama: <input type="text" name="yourname" diperlukan>
[/php]

Baris kode di atas membuat browser Anda menyadari bahwa bidang nama INPUT harus dianggap sebagai wajib (yaitu tidak boleh dikosongkan).

Seperti yang Anda lihat, penanda merah ditampilkan di kotak teks yang sesuai dengan bidang input 'Nama Anda'. Tetapi segera setelah beberapa teks dimasukkan di bidang input nama, penanda berubah menjadi tanda centang yang menunjukkan bahwa nilai yang dimasukkan valid.

Selain <input type="text"> (yaitu jenis input teks), HTML5 sekarang mendukung beberapa opsi input baru seperti pencarian, email, tel, datetime, dll. Dengan kata sederhana, dengan HTML5 kita dapat menulis baris kode di bawah ini :

[php]
<input type="teks" nama="email">
[/php]

menjadi sesuatu seperti:

[php]
<input type="email" name="email">
[/php]

Peramban desktop akan merender kode di atas seperti bidang teks standar lainnya.

Satu hal penting lagi yang ingin saya sampaikan kepada Anda adalah bahwa: ketika Anda mencoba memasukkan atribut seperti yang diperlukan atau input type="email" di demo CodePen bahkan tanpa konten apa pun, Anda masih akan mendapatkan kesalahan pesan saat mengklik tombol 'KIRIM' tanpa alamat email yang valid:

Dalam contoh yang telah kita bahas di atas, Anda dapat melihat bahwa browser secara default menampilkan pesan kesalahan. Tetapi bagaimana jika Anda ingin menerapkan aturan validasi Anda sendiri (yaitu kustom) ke nilai input? Di sinilah pola Regex berguna.

Memahami Pola RegEx

Anda mungkin pernah melihat pola saat memasukkan alamat email seperti abc@a. Tak perlu dikatakan, Anda ingin pengguna Anda memasukkan alamat email yang sebenarnya. Dan, dengan menentukan pilihan Anda sendiri dari pola yang cocok dengan data Anda akan membantu memvalidasi nilai yang dimasukkan. Misalnya, Anda dapat memastikan bahwa email cocok dengan pola yang berisi tiga karakter atau lebih di bagian akhir. Untuk melakukannya, Anda harus menggunakan "atribut Pola" dan Ekspresi Reguler (RegEx).

RegEx pada dasarnya adalah bahasa yang digunakan untuk mengurai atau memanipulasi teks. Paling sering, ekspresi reguler digunakan untuk melakukan operasi kompleks (seperti mencari dan mengganti) untuk pembentukan data teks yang lebih baik. Saat ini, Anda dapat menemukan penggunaan ekspresi reguler di hampir setiap bahasa pemrograman dan skrip. RegEx dapat digunakan untuk memvalidasi data yang dimasukkan di bidang formulir, dengan menerapkannya pada jenis input menggunakan atribut pola sebagai berikut:

[php]
<input id="phone" placeholder="111-111-1111" title="Teks untuk menyampaikan pola nomor telepon" diperlukan pola="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

Juga, jika terjadi kesalahan validasi, Anda dapat memilih untuk menentukan atribut judul bersama dengan kesalahan validasi untuk menampilkan pesan selain "Format salah!" menggunakan baris kode yang diberikan di bawah ini:

[php]
<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="Mohon masukkan alamat email yang valid di sini.">
[/php]

Ingatlah, Anda tidak perlu menulis pola absurd untuk setiap masukan. Sebagai gantinya, dalam banyak kasus Anda hanya perlu menetapkan atribut yang diperlukan untuk beberapa jenis data tertentu. Misalnya, angka di atas 8 akan terlihat seperti:

[php]
<input type="number" min="8" diperlukan>
[/php]

Juga, ingatlah bahwa tidak semua browser menyediakan dukungan untuk semua atribut validasi yang tersedia. Ambil contoh, browser Firefox tidak kompatibel dengan pola "minlength".

Manfaat Menggunakan Validasi Formulir HTML5

Keuntungan terbesar dari penerapan validasi formulir HTML5 adalah umpan balik instan. Sebagian besar, semacam indikasi akan disorot saat pengguna mengisi beberapa bidang dalam formulir, untuk memberi tahu mereka apakah nilai yang dimasukkan valid atau tidak.

Sekarang, ketika Anda memasukkan sesuatu ke dalam kotak teks, warna perbatasan berubah menjadi hijau sebagai berikut:

Namun, seperti yang Anda lihat, ada kelemahan dari pendekatan ini. Bahkan ketika menambahkan nilai yang tidak valid (atau tidak lengkap) di bidang 'Nama Depan', pengguna mendapat indikasi bahwa nilainya benar. Mungkin, Anda mungkin berpikir untuk menambahkan :invalid:not(:empty) ke dalam kode. Sayangnya logika seperti itu tidak akan berfungsi dengan browser karena mereka biasanya menganggap elemen formulir kosong.

Ingin tahu apa yang harus dilakukan?

Anda dapat mencoba menambahkan pemilih semu baru yang disebut ": placeholder-shown" dalam kode sebagai berikut:

[php]
<bentuk>
<label>
<span>Nama Depan</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="Masukkan setidaknya 4 karakter.">
</label>

<button>Kirim</button>

</form>
[/php]

Tetapi sebagian besar browser tampaknya tidak memberikan dukungan untuk yang ditampilkan placeholder, jadi lebih baik Anda menulis skrip untuk beralih kelas ketika bidang input kosong atau tidak. Berikut kode JavaScript untuk hal yang sama:

[php]
$('input:kosong, textarea:kosong').addClass('kosong');

$('masukan').keyup(fungsi () {

if ($(ini).val().trim() !== ”) {

$(ini).removeClass('kosong');

} lain {

$(ini).addClass('kosong');

}

});
[/php]

CATATAN : Ingatlah untuk menghapus elemen placeholder dari markup HTML di atas.

Sekarang ketika Anda menjalankan cuplikan kode di atas bersama dengan markup HTML5, hasilnya akan terlihat seperti:

Seperti yang Anda lihat, warna kotak teks tetap merah hingga validasi yang diterapkan ke bidang tidak terpenuhi. Dan mengklik Kirim menampilkan pesan kesalahan saat memasukkan nama yang tidak lengkap.

Tapi, segera setelah pengguna memasukkan yang lengkap (melebihi 3 karakter) warna batas kotak teks berubah menjadi hijau.

Bagaimana Anda Dapat Menambahkan Label Input Mengambang di HTML5?

Dan sekarang, mari kita bahas pendekatan menambahkan label input mengambang saat memvalidasi formulir HTML5 Anda. Melakukannya, membantu dalam meningkatkan tampilan dan nuansa bentuk. Berikut markup HTML-nya.

Untuk menerapkan pola label float, Anda harus mendorong tag tepat di bawah elemen <input> di markup HTML Anda:

[php]
<bentuk>
<label>
<input type="text" pattern=".{4,}" required title="Karakter tidak boleh kurang dari 4.">
<span>Nama Anda</span>
</label>
<label>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="Silakan masukkan email yang valid.">
<span>Email Anda</span>
</label>
<button>Kirim</button>

</form>
[/php]

CSS akan terlihat seperti:

[css]
label {
posisi: relatif;
tampilan: blok sebaris;
}
rentang label {
posisi: mutlak;
kiri: 20 piksel;
atas: -2em;
ukuran font: .75em;
kursor: teks;
warna: #f27853;
transisi: semua kemudahan 150ms;
}
memasukkan {
batas: 1px solid #f2f2f2;
garis besar: tidak ada;
}
masukan: fokus {
warna batas: #d9d9d9;
}
masukan: valid {
warna batas: #42d142;
}
masukan: tidak valid {
warna batas: #ff8e7a;
}
masukan.kosong {
warna batas: #d9d9d9;
}
masukan.kosong + rentang {
atas: 50%;
mengubah: translateY(-50%);
ukuran font: 1em;
latar belakang: tidak ada;
warna: #cccccc;
}
tubuh {
tampilan: fleksibel;
min-tinggi: 100vh;
latar belakang: #f1f1f1;
font-family: 'Lato', sans-serif;
ukuran font: 150%;
}
membentuk {
margin: otomatis;
}

masukan, tombol {
bantalan: 15px 20px;
batas-radius: 1px;
batas: 2px solid #bdbdbd;
}

tombol {
warna batas: #363636;
latar belakang: #363636;
warna: #FFFFFF;
}
[/css]

Dan terakhir, tulis kode JavaScript:

[kode]
$('input:kosong, textarea:kosong').addClass('kosong');
$('masukan').keyup(fungsi () {
if ($(ini).val().trim() !== ”) {
$(ini).removeClass('kosong');
} lain {
$(ini).addClass('kosong');
}
});
[/kode]

Keluaran:

Anda dapat menerapkan beberapa efek saat menggunakan label input mengambang di HTML5, seperti:

• Tambahkan ikon dengan efek fade in/out saat memvalidasi formulir HTML5.
• Kocok input jika data yang dimasukkan tidak valid.
• Buat warna input redup saat diisi dengan benar.

Hal yang Perlu Dipertimbangkan

Saat mengerjakan implementasi validasi ke formulir HTML5, Anda harus terbiasa dengan:

1. Dukungan Browser : Formulir HTML5 bekerja di browser modern dan IE10+ dengan cara yang sempurna. Meskipun IE versi 9 dan versi yang lebih lama tidak mendukung penyeleksi semu validasi yang menahan Anda untuk menata formulir, tetapi itu akan tetap berfungsi dengan benar.
2. Peringatan : Satu hal yang tidak dapat Anda lakukan saat menerapkan validasi ke formulir HTML5 adalah menata pesan validasi. Itu karena, fungsi tersebut dinonaktifkan oleh browser.

Kata-kata Terakhir

Menerapkan validasi ke formulir sangat penting untuk menambahkan lapisan keamanan ekstra ke situs Anda. Ini karena mencegah pengguna jahat menambahkan teks berbahaya sebagai nilai di bidang formulir Anda. Selain itu, memberikan umpan balik instan kepada pengguna saat mereka memasukkan beberapa masukan ke bidang masukan yang divalidasi dari formulir akan membantu meningkatkan pengalaman mereka. Lagi pula, mereka tidak perlu menghabiskan waktu untuk menyadari bahwa mereka melakukan kesalahan dalam mengisi formulir. Namun, memvalidasi formulir menggunakan JavaScript saja bisa jadi menantang. Di sinilah validasi formulir HTML5 datang untuk menyelamatkan Anda.

Saat menerapkan validasi ke formulir menggunakan HTML5, Anda tidak perlu menulis baris panjang kode JS yang rumit. Sebagai gantinya, Anda dapat menerapkan aturan validasi formulir dengan pengkodean JavaScript minimal. Yang terpenting, banyak fitur baru tersedia dengan validasi formulir HTML5 seperti label input mengambang yang membuat formulir terlihat cantik, mendorong pengguna melakukan pengiriman formulir.