Kita buka kembali file form.html dari pelajaran terakhir. Pertama kita hapus dahulu tag input submit. Sedangkan tag Button kita biarkan, namun kita hapus tag h1-nya. Kita lihat hasilnya di browser. Dan kalau kita langsung coba tekan tombol submit, kita bisa melihat pada bagian URL bahwa browser telah mengirimkan data dari form kita. Namun berhubung kita tidak mengisikan apa-apa pada bagian email dan password, maka data yang dikirimkan juga kosong.

Biasanya dalam merancang form, kita sudah menentukan bahwa ada field-field tertentu yang harus diisi oleh pengguna. Tidak boleh kosong. Sebagai contoh, apabila form kita yang sekarang hendak digunakan untuk login, maka email dan passwordnya tidak boleh kosong. Untuk itu kita mesti menuliskan kode validasi.

Dalam video ini kita akan mempelajari cara melakukan validasi dari sisi front end, lebih spesifiknya lagi validasi menggunakan kode HTML. Cara melakukannya gampang ya. Untuk textbox yang harus diisi, kita cukup tambahkan attribute required. Sebagai contoh, di dalam tag input email, kita tambahkan attribute required.

Kita coba pada browser. Sekarang apabila kita membiarkan semuanya dalam kondisi kosong dan langsung menekan tombol submit, maka browser akan memeriksa terlebih dahulu apakah textbox email sudah diisi atau belum. Apabila ternyata belum diisi, maka akan muncul pesan kesalahan “Please fill out this field”. Dan perhatikan disini bahwa browser tidak mengirimkan data ke server.

Ini adalah salah satu contoh dari validasi dari sisi front end. Ada beberapa kelebihan dan kekurangan dari validasi front end. Kelebihan pertamanya adalah cara untuk melakukan validasinya paling gampang ya, kita cukup menambahkan satu kata required saja ke dalam tag input. Dan kelebihan yang kedua adalah karena browser melakukan validasi terlebih dahulu, maka data tidak dikirimkan ke server, hal ini akan menyebabkan penghematan bandwith, baik bandwith milik pengunjung situs maupun bandwith milik server kita.

Lain halnya apabila kita melakukan validasinya di sisi backend, maka browser akan mengirimkan dahulu seluruh data ke server, dan kemudian server akan mengembalikan pengguna ke form yang sama dan ditambah dengan pesan kesalahan bahwa email harus diisi. Disini sudah terjadi pemakaian resource server, baik itu cpu maupun bandwith.

Selain kelebihan, tentunya juga terdapat beberapa kekurangan dari validasi front end ya. Kekurangan yang paling besar adalah, kode validasi kita bisa dengan gampang diretas oleh pengguna. Sebagai contoh, kita lihat saja form kita yang sekarang apabila saya langsung submit pada saat ini akan keluar pesan kesalahan. Sekarang kita klik kanan dan kita pilih Inspect. Maka pada browser akan keluar development toolsnya. Kita cari tag input email kita dan kita hapus kata requirednya. Sekarang kita sudah bisa mengklik tombol submit tanpa ada validasi. Jadi perlu diingat disini ya, walaupun kita sudah melakukan validasi di sisi front end, dari sisi back end harus tetap melakukan validasi ulang.

Kekurangan kedua dari validasi ini adalah ketergantungan terhadap browser. Kita bisa melakukan search google dengan kata kunci html input required. Dan kita lihat referensi dari w3schools.com. Disini kita bisa melihat versi dari browser yang mendukung attribute required ini. Misalnya Chrome dimulai dari versi 5 keatas. Jadi apabila pengunjung situs kita menggunakan Chrome sebelum versi 5, maka browser masih belum mengerti apa arti dari kata required tersebut, sehingga browser tidak melakukan validasi.

Dan kekurangan terakhir yang kita bahas disini adalah pesan kesalahan dari validasi tersebut. Kita bisa melihat bahwa tulisan yang keluar adalah “Please fill out this field”. Tulisan ini bersifat umum ya. Kita tidak bisa menggantinya menjadi pesan yang lebih spesifik, misalnya menjadi “Harap isi Email”.

Selain attribute required, masih ada beberapa attribute lagi yang bisa kita gunakan untuk validasi form. Yang pertama adalah attribute minlength. Dengan menggunakan attribute minlength, kita bisa menentukan berapa jumlah huruf minimal yang harus diisikan ke textbox kita. Misalkan pada tag input email kita tambahkan minlength=”5”. Lalu kita refresh browser. Dan kita masukan hanya huruf a saja pada email. Maka browser akan mengeluarkan pesan kesalahan baru ya, yang meminta kita untuk memasukan minimal 5 karakter ke dalam textbox email.

Kita bisa search ke google dengan kata kunci html input minlength dan melihat lagi referensi dari w3schools.com. Disini disebutkan bahwa browser yang bisa mendukung attribute minlength harus menggunakan versi yang lebih tinggi lagi dibandingkan dengan required. Contohnya browser Chrome, yang tadinya minimal versi 5, untuk bisa menjalankan attribute minlength harus versi 40 keatas.

Attribute berikutnya yang bisa kita tambahkan adalah maxlength. Dengan menggunakan maxlength maka kita bisa menentukan berapa jumlah karakter terbanyak yang boleh kita isikan ke dalam textbox kita. Sebagai contoh pada tag input email saya tambahkan lagi maxlength=”8”. Dan kita coba refresh browser dan kita coba masukan angka satu dan selanjutnya. Kita bisa lihat bahwa textbox hanya bisa menerima maksimal sampai 8 karakter saja. Huruf berikutnya yang kita masukan sudah tidak bisa menambah data di dalam textbox.

Selanjutnya kita akan mempelajari mengenai cara melakukan validasi melalui attribute type. Pertama kita pindahkan dahulu attribute minlength dan maxlength ke tag input password. Lalu kita ganti tag input email, dari awalnya menggunakan tipe text, menjadi tipe email. Dengan menggunakan tipe email ini, maka browser akan secara otomatis melakukan validasi terhadap data yang dimasukan oleh pengguna, agar data tersebut sesuai dengan format email. Kita coba refresh browser kita.

Bisa kita tes disini kalau kita hanya memasukan huruf a saja, maka browser akan memberi tanda error dan meminta harus ada tanda @, karena semua email pasti ada tanda @-nya. Dan kalau kita tambahkan tanda @ saja, browser tetap memberi tanda error karena setelah @ harus diikuti dengan nama domainnya. Setelah kita tambahkan domain seperti gmail.com, barulah browser mau menerima data email kita.

Validasi terakhir yang akan kita bahas di video ini adalah attribute type=”number”. Dengan menggunakan attribute ini, secara otomatis browser akan melakukan validasi sehingga data yang dimasukan oleh pengguna hanya bisa bilangan bulat saja.

Kita coba ke kode html kita. Setelah tag form, kita tambahkan tag label baru dengan konten Umur. Setelah itu kita tambahkan tag input dengan type=”number”, id=”umur” dan name=”umur”. Kita tambahkan konten Tahun dan dua buah tag BR.

Kita bisa coba refresh browser. Dan kita bisa coba di textbox umur ini hanya bisa dimasukan angka saja ya. Kalau saya mencoba menekan huruf disini, maka browser tidak menambahkan huruf tersebut ke dalam textbox. Lain halnya kalau misalnya saya menekan angka 1, maka browser akan menambahkan angka tersebut ke dalam textbox. Pada bagian kanan dari textbox ada tombol keatas dan kebawah ya, yang kalau kita tekan akan menambah ataupun mengurangi nilai yang berada di dalam textbox.

Perhatikan bahwa textbox number ini hanya bisa menerima bilangan bulat, tidak bisa menerima bilangan pecahan. Jadi walaupun kita bisa mengetikan tanda titik ke dalam textbox, misalnya kita membuat bilangan dua setengah. Namun browser akan menolak nilai yang kita submit, dan meminta kita untuk mengubahnya menjadi 2 atau 3.

Kita review kembali apa yang telah kita pelajari pada video ini.

Kita telah mempelajari beberapa attribute yang bisa ditambahkan ke dalam tag Input, untuk membantu kita melakukan validasi terhadap data yang diberikan oleh pengguna.

Yang pertama adalah attribute required. Dengan menambahkan attribute required, maka browser akan memeriksa terlebih dahulu isi dari textbox sebelum mengirimkannya ke server. Textbox tidak boleh kosong.

Yang kedua adalah attribute minlength. Dengan menambahkan attribute minlength, maka browser akan memeriksa jumlah karakter yang dimasukkan oleh pengguna sebelum mengirimkannya ke server. Jumlah karakter tidak boleh lebih kecil dari nilai minlength.

Yang ketiga adalah attribute maxlength. Dengan menambahkan attribute maxlength, maka browser akan mencegah agar pengguna tidak memasukkan jumlah karakter lebih banyak dari nilai maxlength.

Kemudian kita juga telah mempelajari beberapa jenis tipe input yang berfungsi untuk validasi. Yang pertama adalah tipe email, dimana browser akan memeriksa data yang dimasukkan oleh pengguna harus sesuai dengan format email. Dan yang kedua adalah tipe number, yang menyebabkan textbox hanya bisa diisi dengan angka yang akan membentuk bilangan bulat.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.