Validasi Borang menggunakan HTML5

Untuk membangunkan sebuah aplikasi web yang mesra pengguna dan memproses dan mengeluarkan maklumat dengan betul atau dalam sistem maklumat, pembangun biasanya menggunakan logik tertentu untuk menapis maklumat sebelum dihantar. Jadi antara cara yang paling biasa dilakukan termasuklah menggunakan teknik validasi “Client side” atau “Server side”.

Teknik “client side” selalunya dilakukan menggunakan Javascript dan “Server-side” dilakukan pada fail ASP.NET atau PHP. Ini biasanya memakan masa yang agak lama dan sukar apatah lagi jika bentuk teks yang dihantar tu kena dalam format yang betul. Contohnya, jika ruangan e-mel perlulah disemak untuk simbol “@” dan titik domain.

Walaupun korang menggunakan validasi secara HTML5, aku amat galakkan juga korang agar terus menggunakan validasi “client side” kerana untuk pengetahuan, tidak semua pelayar web lama yang menyokong HTML5. Jadi kalau korang sedang menggunakan pelayar web moden.

Melalui HTML5, validasi borang ini dipermudahkan dengan meletakkan tag tertentu pada element HTML. Untuk kemudahan ini, haruslah ya korang menggunakan dokumen dengan format HTML5 dan meletakkan tag ini pada baris paling awal sesebuah dokumen HTML.

<!DOCTYPE html>

Seterusnya, bayangkan seorang peniaga online dan mempunyai web untuk membolehkan mereka yang berminat dengan pakej tersebut menghubungi peniaga tadi. Antara maklumat yang diperlukan ialah Nama Penuh, Alamat E-mel, Blog, Umur dan Tarikh Lahir. Kesemua ruangan ini wajib diisi.

<form>
 Nama: <input type="text" required/>
 Alamat E-mel: <input type="email" required/>
 Blog: <input type="url" required/>
 Umur: <input type="number" value="1" min="1" max="3" required/>
 Tarikh Lahir: <input type="date" required/>
 <input type="submit" value="Submit">
 </form>

Cuba lihat pada tags yang dinyatakan, iaitu mengguna “type” yang berlainan untuk setiap jenis maklumat dan meletakkan attribute “required” pada setiap ruangan.

Ini bermakna, sekiranya ruangan tersebut tidak diisi atau kosong, ianya akan memaparkan mesej ralat dan borang tidak akan dapat dihantar dan   begitu juga sekiranya maklumat yang dimasukkan dalam format yang salah seperti alamat e-mel tertinggal simbol “@” dan sebagainya. Beberapa format ini juga membolehkan korang mengeluarkan elemen seperti Kalendar dan sebagainya ke dalam ruangan “input”. Mudah bukan?

Jadi, kalau tengah buat PSM, jangan lupa untuk implement benda ni juga dalam form.


Komen telah ditutup