Solusi Praktis Validasi Form Dengan HTML5

Sebelum kedatangan HTML5, validasi form biasanya dilakukan dengan bantuan javascript/jquery atau langsung ditangani oleh bahasa pemrograman di web server. Namun kedatangan HTML5 memberi angin segar pada webdeveloper maupun desainer web dalam hal kemudahan proses validasi form. HTML5 mengenalkan beberapa attribute dan input type tambahan yang langsung memvalidasi isian form saat proses submit berlangsung. Tentunya validasi form HTML5 tidak memiliki fitur instan seperti halnya javascript, namun cukup efisien dalam menekan ukuran file yang ujung-ujungnya meningkatkan kecepatan loading halaman website.

Attribute baru yang dikenalkan di HTML5 untuk memastikan bahwa suatu field pada form tidak boleh kosong adalah 'required'. Contoh penggunaannya seperti dibawah ini:

<input type='text' name='nama' required />

Sedangkan beberapa input type baru yang dikenalkan adalah email, number, url, range. Sesuai dengan namanya, contohnya email, maka tipe data yang dimasukkan oleh pengguna harus sesuai dengan tipe yang ditetapkan pada form tersebut. Contoh penggunaannya sebagai berikut:

<input type='email' name='email' />

Pada contoh diatas, pengguna akan diminta memasukkan alamat email dengan format yang valid (abc@def.xyz). Untuk melihat contoh lain sekaligus mengetahui input type baru yang dikenalkan di HTML5 bisa dilihat disini

Sayangnya, belum semua input type baru ini bisa ditampilkan oleh browser-browser terkini. Hingga saat artikel ini ditulis, tercatat Google Chrome yang paling banyak mendukung fitur baru ini. Disusul oleh Opera, Safari lalu (sayangnya) Firefox. Sedangkan IE diketahui paling sedikit mendukung fitur HTML5.

Ada source yang cukup bagus tentang implementasi validasi form HTML5 yang dikolaborasikan dengan CSS untuk menghasilkan form yang menarik dan user friendly. Silahkan kunjungi dari sini. Semoga Bermanfaat