Tutorial validasi Input HTML5 Form

Melanjutkan pembahasan tentang HTML5 Form, kali ini kita akan fokus kepermasalahan validasi di HTML5. Validasi form di HTML5 ini ternyata sangat powerful dan mengurangi kode validasi yang dulunya menggunakan javascript ataupun jQUery. Untuk pembahasan validasi, saya akan membagi menjadi 3 bagian yaitu validasi dasar, validasi pattern (REGEX) dan cara menampilkan pesan custom divalidasi. Semua pesan error yang muncul di screenshot adalah pesan error di Browser chrome 37. Pesan error yang muncul di browser lain mungkin berbeda.

Valdiasi dasar

Validasi palign dasar di html5, cukup gunakan attribute required di input.


<label for="name">Nama event</label>
<input id="name" type="text" placeholder="Your event" 
autofocus required>

Berikut ini adalah pesan (more…)

Tutorial HTML5 Form

HTML5 LogoSaat kita belajar dasar dasar pemrograman berbasis web, maka hal penting yang harus dikuasai adalah masalah input tipe dan validasinya. Dalam HTML versi sebelumnya, input hanya terbatas pada text,file,dan password. Lalu untuk memvalidasi misalkan input harus angka, kita harus menggunakan javascript, jQuery ataupun menggunakan teknik serverside programming. Dengan munculnya HTML5, input form diweb menjadi lebih kaya dan lebih mudah dipakai.

Dalam artikel kali ini, saya fokus ke dua hal; pertama, masalah attribute baru di input dan yang kedua tentang input baru di HTML5.

Attribute baru di HTML5 Form

Di Html5, ada  3 attribute baru yang bisa langsung dipakai dan sangat bermanfaat bagi user dan (more…)