Kode Praktis HTML5: Cara Mudah Validasi Form Wajib Diisi

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 😎

_Related Posts & Ads_

6 Responses

  1. error code berkata:

    kalau kecocokan validasi gan, bagaimana?

    • Muhammad Erfan berkata:

      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…

  2. Yogi Prayogo berkata:

    Apkah cara ini masih efektif ?

  3. Vidi Bachrum berkata:

    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

  4. MERENLAU berkata:

    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..

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *