Cara Membuat Form Validation dengan HTML5

Seorang front-end web developer yang baik adalah yang memperhatikan keefektifan dalam pengkodean. Salah satu keefektifan yang bisa dilakukan seorang front-end developer adalah dengan menggunakan cara yang lebih mudah, cepat dan irit source untuk menciptakan fungsi tertentu dalam web yang dirancang.

HTML5 input form validation

Contoh prakteknya adalah dengan membuat fungsi validasi form dengan HTML5 dan sedikit bantuan javascript. Biasanya, untuk membuat fungsi form validation, setidakya kita harus memakai plugin jquery untuk membuatnya. Namun, cara seperti itu boros source dan juga sering terjadi bentrok dengan fungsi javascript lain.

Oleh karena itu, posting ini bisa jadi solusi bagi anda yang ingin membuat fungsi form validation lebih simpel, irit dan mudah dengan menggunakan HTML5 dan sedikit javascript untuk membantunya. Cekidot!

1. Validasi untuk Input-an yang wajib diisi

Untuk melakukan validasi pada input-an yang wajib diisi, anda bisa menggunakan atribut “required” pada tag input tersebut. Contoh penggunaannya sebagai berikut :

<input type=”text” placeholder=”Ini harus diisi” required/>

Hasil :

2. Validasi untuk menentukan jumlah karakter maksimal

Jika anda ingin membatasi jumlah karakter pada input data tertentu, anda bisa menggunakan cara dibawah ini.

<input type=”text” maxlength=”50″ placeholder=”Maksimal karakter adalah 50″/>

Hasil :

3. Validasi untuk mencocokan password dan konfirmasi password

Yang ini agak sedikit kompleks karena kita harus menggunakan javascript untuk membuat validasinya. Berikut ini adalah kodenya.
Html :

<input type=”password” id=”password1″ placeholder=”Password”/>
<input type=”password” id=”password2″ placeholder=”Konfirmasi Password”/>

Javascript :

<script type=”text/javascript”>
window.onload = function () {
document.getElementById(“password1”).onchange = validatePassword;
document.getElementById(“password2”).onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById(“password2”).value;
var pass1=document.getElementById(“password1”).value;
if(pass1!=pass2)
document.getElementById(“password2”).setCustomValidity(“Passwords Tidak Sama”);
else
document.getElementById(“password2″).setCustomValidity(”);}
</script>

4. Validasi untuk Input-an berformat tanggal/ Waktu

Biasanya, kita akan menggunakan JQuery untuk membuat datepicker yang akan dipakai untuk meenginput data dengan format tanggal. Dengan HTML5 kita hanya perlu tag seperti di bawah ini :

<input type=”date”/>
<input type=”datetime”/>
<input type=”datetime-local”/>
<input type=”month”/>
<input type=”time”/>
<input type=”week”/>

Hasil :

// Tanggal
// Tanggal dan Jam
// Tanggal dan Jam lokal
// Bulan
// Jam
// Minggu dalam satu tahun

5. Validasi untuk Input-an berformat email

Untuk validasi input dengan format email, anda bisa menggunakan input dengan type “email”.

<input type=”email” placeholder=”Email”/>

Hasil :

6. Validasi untuk Input-an berformat URL

Untuk validasi format url, anda bisa menggunakan input dengan type url.

<input type=”url” placeholder=”URL dengan HTTP”/>

Hasil :

7. Validasi untuk Input-an berformat angka dalam jarak/interval tertentu

Untuk validasi data yang isinya hanya boleh angka dalam interval tertentu, anda bisa menggunakan input type “number”.

<input type=”number” min=”1″ max=”10″/>

Hasil :

8. Validasi untuk Input-an yang hanya bisa diisi dengan karakter tertentu dengan jumlah tertentu.

Terkadang ada data yang isinya hanya terdiri dari karakter tertentu dan tidak boleh karakter lain. Untuk validasinya, anda bisa menggunakan cara dibawah ini :

<input type=”text” pattern=”[1-9]{5}”/>

Kode diatas berarti kita hanya boleh memasukkan karakter angka dengan jumlah 5 karakter, tidak boleh lebih atau kurang.
Hasil :

9. Validasi untuk Input data nomor telepon

Jika pada form anda ada input data telepon, maka gunakan lah cara dibawah ini.

<input type=”tel”/>

Hasil :

Bagaimana? lebih mudah bukan?.

Namun, perlu diingat bahwa ini adalah HTML5, yang mana hanya browser-browser tertentu dan terbaru yang support. Jadi, sebelum menggunakan trik validasi form ini pada website anda, anda harus tahu terlebih dahulu browser seperti apa yang kebanyakan dipakai oleh pengunjung website anda.

Untuk melihat browser yang support HTML5 input diatas anda bisa lihat disini :

http://www.w3schools.com/html/html_form_input_types.asp

Jika pengunjung web anda adalah orang yang sangat awam dengan internet dan bahkan tidak tahu apa itu browser, sebaiknya hindari pemakaian trik ini karena biasanya mereka tidak akan memperhatikan kalau browser mereka adalah browser lama. Sebaliknya jika pengunjung anda adalah orang-orang yang melek IT, maka dianjurkan untuk memakai trik ini karena biasanya mereka update pada perkembangan teknologi, termasuk perkembangan software browser.

Yap, itu saja tutorial kamis ini. Jangan lupa datang lagi kamis depan, atau hari senin jika anda tertarik juga dengan tips-tips ngeblog saya. Semoga bermanfaat 🙂

~Muhammad Syakirurohman~

31 Comments

  1. sep mantep, makasih kakak :v

  2. ini yang aku cari, makasih mas. aku cobak dulu

  3. makasih kak, keren tutorialnya..

  4. Masih bingung dengan kebanyakan kode, wkwkwk

  5. gan. tanya dong.. untuk web yg ini ente pke cms wordpress apa ngoding sendiri?? hehehe

  6. Thanks gan,,, bermanfaat banget,
    btw sekalian mau nanya, kalo mau bikin…
    gini deh, ane punya tabel yg berisi data beberapa angka, nah pada kolom yg angkanya di bawah 5 pengen ada peringatan atau tulisan di atasnya “ini dibawah 5”,

  7. HTML 5 adalah versi yang sangat dianjurkan pada masa ini , jadi kita memang harus mengikuti perkembangan versi dari HTML itu sendiri

  8. html 5 ada pengaruhnya gak sih buat SEO?

  9. gan.. gimana ubah teks peringatannya menjadi bahasa ini.. bukan english

  10. mas numpang tanya kalo yang di maksud
    ke. 8. Validasi untuk Input-an yang hanya bisa diisi dengan karakter tertentu dengan jumlah tertentu.

    itu angka atau huruf yaa?
    saya coba ngga bisa baik huruf atau angka

    terima kasih

    • Untuk yang kedelapan itu yang bisa dimasukkan hanya angka 1-9 saja dengan batas 5 digit.. Jika di mas tidak bisa, berarti browsernya belum support fungsi tersebut, coba update browsernya ke versi terbaru, karena kalo di saya bisa 🙂

  11. maaf numpang tanya nh kalok untuk validasi inputan gmna ya ,, yang kita validasi itu nama ,matakuliah ,waktu ,jadi ketika kita input kan nama yang sama dan waktu yang sama, akan muncul validasi ,tidak dapat di simpan .. trimss

  12. mau tanya untuk validasi tanggal saya coba kenapa tuudak bisa yah, terus untuk validasi angka yang berupa harga atau total bayar caranya seperti apa yah trimakasih sebelumnya:)

  13. guyur pelan2 belajar gan, lagi fokus sama tabel dan form , d blog ini lengkap artikelnya

  14. mantap bangets gan, keep your good work 🙂

  15. Kalau validasi untuk checkbox ada gak mas ?

  16. bagus sangant membantu

  17. Thanks agan tutornya

  18. Bisa tolong bantu saya agar kolom kolom ini wajib diisi oleh user. Kalau misalnya user gk ngisi kolom, maka ketika user klik tombol next, akan error dan tidak bisa ke page selanjutnya.

    Masukkan Angka :


    Saya udah googling dan edit edit masih aja gagal.

    Makasi

Tinggalkan Balasan