Kode Praktis HTML5: Cara Mudah Validasi Form Wajib Diisi

Ditulis oleh Muhammad Erfan, dipublikasi sejak 28 Oktober 2016 pukul 09:32, disimpan dalam kategori HTML, Kode Praktis. Ingin mengomentari tulisan ini? Ada 6 komentar.

Seringkali saat kita mengisi sebuah formulir online berbasis web, entah untuk pendaftaran atau sekedar login, saat melakukan klik tombol akan diberitahukan bahwa ada kolom isian yang mungkin tertinggal. Ini biasanya disebut dengan validasi.

Sudah diisi atau belum

Kode praktis kita kali ini digunakan untuk validasi form tingkat pertama, maksudnya, cara paling mudah untuk melakukan validasi apakah sebuah kolom (form) sudah terisi atau belum. Sekali lagi ini untuk memalidasi apakah sudah terisi atau belum, bukan memalidasi kebenaran format isian. Untuk validasi format isian ada pada tulisan lain, salah satu contohnya adalah validasi alamat email.

Required

Untuk validasi apakah sebuah kolom sudah terisi atau belum, kita gunakan salah satu atribut HTML yaitu required dengan cara menambahkannya pada tag yang diinginkan. Misal untuk memastikan kolom username terisi atau tidak coba perhatikan kode berikut ini.

<input type="text" name="username" required>

Atau untuk lebih jelasnya, coba dengan kode yang lebih lengkap, sebagai contoh form pendaftaran.

<!DOCTYPE HTML>
<html>
<head>
   <title>Validasi Isian Form</title>
</head>
<body>
   <h1>Validasi Isian Form</h1>
   <form>
      <fieldset>
       <legend>Formulir Pendaftaran</legend>
       Nama Lengkap:<br>
         <input type="text" name="nama" required><br>
       Alamat Email:<br>
         <input type="email" name="email" required><br>
       Sandi:<br>
         <input type="password" name="sandi1" required><br>
       Sandi (ulangi):<br>
         <input type="password" name="sandi2" required><br>
     <br>
         <input type="submit" value="Kirim">
    </fieldset>	 
   </form>
</body>
</html>

Setelah dijalankan hasilnya akan memunculkan pesan seperti gambar.

Validasi Isian Form

Selain validasi isian form seperti ini, bisa juga menggunakan script pemrograman seperti javascript atau PHP dan sebagainya. Sampai jumpa di kode praktis lainnya 😎

Tinggalkan Balasan 6

Your email address will not be published. Required fields are marked *


error code

error code

kalau kecocokan validasi gan, bagaimana?

Muhammad Erfan

Muhammad Erfan

Terima kasih atas kunjungan dan komentar Anda…

Untuk kecocokan validasi misalnya isian harus angka atau format email dan sebagainya, bisa menggunakan type yang sesuai. Tetapi jika validasi kecocokan yang dimaksud adalah terkait isian yang lebih detail, perlu tambahan kode setidaknya menggunakan JavaScript.
Kalau mau yang lebih lengkap lagi validasinya bisa menggunakan pemrograman seperti PHP atau sekalian menggunakan framework misalnya CodeIgniter.

Demikian semoga membantu…

Yogi Prayogo

Yogi Prayogo

Apkah cara ini masih efektif ?

Muhammad Erfan

Muhammad Erfan

Tergantung penggunaannya, untuk pemula dan aplikasi sederhana masih layak digunakan…

Vidi Bachrum

Vidi Bachrum

Bagaimana dengan form file pada gambar gimana cara buat validasinya? Saya mahasiswa dari STMIK ATMA LUHUR dengan nim 1922500109 nama vidi bachrum terimah kasih artikelnya tolong di update terus ya terutama artikel untuk htmlnya karena ini sangat membantu kami dalam pembelajaran

MERENLAU

MERENLAU

halo kak.. thanks kak atas artikelnya sudah membantu dalam perkuliahan saya kali ini.. saya mau tanya kak, bisakah validasi dilakukan pada semua hal yang diinput? smoga kakak dapat terus berkarya dlm membuat artikel” pada website ini, sukses slalu kak.. perkenalkan nama saya meren laurensia, mahasiswi dari STMK Atma Luhur Pangkalpinang..