Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

 

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting!

Mengapa?

Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error.

Dampak terburuknya:

Website kita bisa diambil alih atau di-hack.

Ngeri kan.

Karena itu..

Jangan percaya 100% dengan data yang diinput kan user. Bisa saja itu script jahat.

Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server.

Dulu.. validasi data di sisi client dilakukan dengan Javascript. Namun, kini kita sudah dimudahkan dengan fitur terbaru di HTML 5.

HTML sendiri sudah menyediakan fitur untuk validasi data pada Form. Fitur ini mulai ditambahkan pada HTML 5.

Bagaimana cara menggunakannya?

Mari kita bahas..

Validasi Type Inputan

Form memiliki banyak type inputan. Kita akan fokus membahas type inputan teks.. karena ini cukup banyak jenisnya.

Sebelum HTML5, input teks dan angka dibuat dalam type teks saja.

Contoh:


<input type="text" name="tinggi-badan" />

Padahal nilai yang akan diinputkan nantinya dalam bentuk angka, namun di sana kita memberikan type text.

Akibanya user bisa saja menginputkan teks misalnya:

input teks

Kita tidak ingin seperti ini.. data ini tidak valid, seharusnya yang diinputkan adalah angka 170.

Nah, untuk mengatasi ini, kita harus menggunakan type inputan number agar nilai yang diinputkan hanya berupa angka saja.

<input type="number" name="tinggi-badan" />

Selain type number, terdapat juga type input yang lainnya.

Type Fungsi
color Untuk input kode warna
date Input berupa tanggal
datetime-local Untuk input tanggal dan waktu
email input berupa alamat email
file untuk inputan berupa file
hidden untuk inputan yang tersembunyi
image untuk inputan berupa gambar
month untuk meng inputkan bulan
password untuk meng inputkan password
range untuk meng inputkan rentang angka
search inputan teks untuk kata kunci pencarian
tel untuk meng inputkan nomor telepon
time untuk meng inputkan waktu/jam
url untuk input alamat URL
week untuk input tanggal dalam seminggu

Silahkan dicoba-coba sendiri.

Oh iya, beda jenis input.. nantinya kalau dibuka di HP, akan beda juga jenis keyboard yang ditampilkan.

Contoh:

Type input telepon.

input telepon

Lihat keyboard-nya.. di sana yang ditampilkan adalah keypad untuk menginputkan nomer telepon. Ini karena kita memberikan type inputan tel.

Contoh yang lainnya:

Input type search, akan ada tombol search di keyboard.

input search

Input type date, akan menampilkan form penginputan tanggal.

input tanggal

Silahkan coba sendiri.

Validasi: Data tidak Boleh Kosong

Beberapa field input bersifat penting, misalnya pada form pendaftaran. Nama dan alamat email itu penting dan harus diisi.

Nah, untuk memaksa user agar tidak menginputkan data kosong.. kita bisa gunakan atribut required.

Contoh:


<form action="">
    <input type="text" name="name" required/>
    <input type="email" name="email" required />
    <input type="submit" value="daftar" />
</form>

Dengan bengini, jika user tidak mengisi data.. ia akan dipaksa untuk mengisinya.

input required

Validasi: Minimal dan Maksimal

Masih ingat dengan type input number?

Pada type inputan ini, semua jenis angka akan valid. Namun, kadang user menginputkan angka yang salah.

Misalnya untuk inputan tinggi badan, mereka memberikan nilai -29 atau 9999.

Tentu ini bukanlah nilai tinggi badan yang valid.

Karena itu, kita harus menentukan batas minimal dan maksimalnya.

Caranya:

Gunakan atribut min dan max.

Contoh:


<form action="">
    <input type="number" name="tinggi" min="100" max="400"/>
    <input type="submit" value="daftar" />
</form>
Maka nilai minimal yang boleh dinputkan adalah 100 dan maksimalnya 400.

input min max

Nah membatasi nilai minimal dan maksimal pada inputan teks, kita bisa pakai atribut minlength dan maxlength.

Contoh:


<form action="">
   <label for="name">Name (4 to 8 characters):</label><br>
   <input type="text" id="name" name="name" required
       minlength="4" maxlength="8">
</form>

Hasilnya:

input min max

Data Tidak Boleh Diisi

Ada beberapa jenis inputan yang tidak boleh diisi user. Biasanya nilainya dibuat otomatis dari sistem.

Contoh:

Misalnya kita ingin membatasi agar user tidak mengubah username. Maka kita bisa disable field pengisian username dengan atribut disabled.


<form action="">
    <input type="text" name="username" value="siapngoding" disabled/>
    <input type="text" name="email"/>
</form>

Hasilnya:

input min max

Validasi Jenis File

Validasi jenis file penting dilakukan saat membuat form upload.

Misalnya, kita ingin user mengupload file gambar saja. Tapi karena kita tidak validasi.. bisa saja mereka mengirimkan file script jahat.

Akibatnya, website kita jadi error dan diambil alih.

Nah, untuk melakukan validasi jenis file, kita bisa gunakan atribut accept pada input type file.

Contoh:


<form action="">
  <input type="file" accept="image/*" name="file"><br>
  <input type="submit" value="upload" />
</form>

Hasilnya:

Saat kita klik tombol Browse file maka hanya akan ditampilkan file dengan jenis image saja.

input image

Nilai dari attribut accept dapat berupa mime type dan juga ekstensi dari file.

Pada contoh di atas, kita memberikan nilai mime type image/* yang artinya file yang valid adalah file yang bertipe gambar apapun ekstensinya.

Silahkan cek daftar mime type untuk file web di: Common MIME types .

Menggunakan Pola (Pattern)

Nah, untuk validasi data yang lebih kompleks.. kita bisa gunakan pola atau regex (Regular Expression).

Contohnya:

Kita ingin validasi data grade dari mahasiswa. Karena validasi untuk nilai grade belum ada di HTML, maka kita bisa menggunakan pattern.

Misalkan data yang valid adalah A sampai F dan ada A+B+, dan C+.

Maka kita bisa gunakan pola regex seperti ini:

[A-F][+-]?|D

Pola ini bisa kita taruh pada attribut pattern.

Contoh:


<form action="">
  <label>Input Grade</label>
  <input type="text" pattern="[A-F][+-]?|D">
  <input type="submit" value="Simpan" />
</form>

Maka hasilnya:

input grade
Karena data yang diinputkan tidak sesuai dengan pola regex, maka ia dianggap tidak valid.

Oh iya, untuk mempelajari pola regex di atas silahkan cek di regex101.

Mengubah Pesan Validator

Kadang kita ingin mengubah pesan yang ditampilkan saat data invalid.

Caranya:

Kita bisa gunakan Javascript.

Contoh:

<form action="">
  <label>Input Grade</label>
  <input type="text" name="grade" pattern="[A-F][+-]?|D">
  <input type="submit" value="Simpan" />
</form>

Kemudian kode Javascriptnya..


var gradeField = document.querySelector("input[name=grade]");

gradeField.addEventListener("invalid", function(){
  this.setCustomValidity('');
  if (!this.validity.valid) {
      this.setCustomValidity('Nilai grade salah');  
    }
});

Pada kode tersebut, kita akan mendengarkan event invalid. Ketika field gradeField berstatus invalid maka fungsi yang di dalamnya akan terpanggil.

Pada fungsi tersebut, kita menulis ulang isi pesan validasinya.

Maka hasilnya:

input grade

Live demo : Jsbin

Apa Selanjutnya?

Selamat 🎉

Kamu sudah belajar dasar-dasar validasi data form di HTML. Validasi di sisi client saja belumlah cukup. Karena itu, silahkan pelajari juga cara validasi data di sisi server.

Akhir kata..

Semoga bermanfaat.