Friday, August 2, 2019

Tambahkan Validasi Agar Form Input Tidak Boleh Kosong di HTML dan PHP

Artikel kali ini akan membahas tentang cara membuat validasi form input tidak boleh kosong menggunakan html 5, membuat validasi form di php atau html sangatlah penting, mengingat bahwa tidak semua orang dapat dengan cepat untuk peka terhadap apa yang akan diisi didalam form input di html dan php.

Membuat Validasi Form Input Tidak Boleh Kosong di HTML 5


Html 5 sendiri telah memikirkan sampai sejauh itu, bahwa perlu adanya validasi untuk membantu sipengembang dalam mengingatkan kepada user akan hal-hal yang harus di patuhi dalam mengisi form, dan benar saja bahwa html5 telah terdapat validasi yang sering digunakan untuk mengecek data sudah diisi atau belum pada form input data di php atau html. 

Validasi Form Tidak Boleh Kosong berguna untuk mencegah terjadinya pengiriman data sebelum semua form terisi dan sebelum semua form seusai dengan ketentuan, baik itu minlength, maxlength dan lain sebagainya.

Untuk itu kita akan membahas cara mudah membuat validasi textfield harus diisi pada form html dan php. Sehingga membuat form yang kamu buat dapat menangani hal sederhana namun manfaat yang baik bagi system yang akan kamu bangun, walau dalam konteks ini adalah validasi dasar dalam html.

Sebenarnya, untuk lebih maksimal harus menggunakan sebuah javascript yang sering sigunakan dalam membuat validasi form oleh para web development, namun bukan berarti bahwa fungsi required dalam memvalidasi form input tidak boleh kosong memiliki peran yang biasa-biasa saja. Keduanya sama saja. 

Atribute Validasi Form Input


Seperti yang disampaikan tadi, bahwa yang kita gunakan dalam membuat validasi form di php atau html menggunakan required, required merupakan attribute dari tag Input dan Select.yang berguna untuk mengecek setiap form input apakah sudah terisi atau belum, dan memvalidasi apakah sesuai dengan syarat dalam inputnya. Seperti max dan min atau lainnya.

Untuk lebih jelasnya, mari kita masuk kedalam contoh form dengan validasi textfield masih kosong dengan html5. Copas dan simpan script validasi form login sederhana ini.


<!DOCTYPE html>
<html>
<head>
<title>Validasi Form Login Dengan HTML5</title>
  <style type="text/css">
<!--
body{
  background-color: black;
}
.login {

}
h2{
  color: white;
}
label {
  font-size: 20pt;
  color: white;
  font-family: times new roman;
}
 
.login input{
  padding: 8px;
  width: 95%;
  background: #efefef;
  font-size: 15pt;
  margin: 6px 0px;
  border-radius: 5px;
}
 
.botton{
  margin-top: 10px;
  background: #3498db;
  color: black;
  padding: 5px 8px;
  border-radius: 5px;
  width: 60px;
  height: 45px;
}

-->
  </style>
</head>
<body>
  <br/>
  <br/>
  <center>
    <h2>LOGIN</h2>
  </center>  
  <br/>
  <div class="login">
  <br/>
    <form action="login.php" method="post" onSubmit="return validasi()">
      <div>
        <table width="304" border="0" align="center" bgcolor="">
          <tr>
            <td width="71" height="45"><label>Username</label></td>
            <td width="5">:</td>
            <td width="150"><input type="text" name="username" id="username" required /></td>
          </tr>
          <tr>
            <td height="51"><label>Password</label></td>
            <td>:</td>
            <td><input type="password" name="password" id="password" required /></td>
          </tr>
          <tr>
          </tr>
          <tr>
            <td height="35" colspan="5"><div align="center">
              <input name="submit" type="submit" class="botton" value="Login">
            </div></td>
          </tr>
        </table>
      </div>
      <div>
        <label></label>
      </div>      
      <div></div>
    </form>
  </div>
</body>
</html>
Maka ketika user menglakukan aksi yaitu dengan menekan tombol Login tanpa mengisi username atau password, akan memberikan pesan untuk mengisi bagian yang masih kosong tersebut. Perhatikan gambar berikut ini

menambahkan atributte Required untuk validasi form input tidak boleh kosong di html dan php
Gambar Validasi Input Tidak Boleh Kosong di HTML

Bergitu juga, setelah mengisi form username dan menekan tombol login lagi, maka pada password juga akan tetap menampilkan pesan please fill out this field, yang artinya adalah “tolong isi pada bagian ini”. Sehingga form akan tetap memvalidasi semua form yang diberikan required oleh pengembang. Apabila ada salah satu aja form yang tidak diisi, maka tidak akan dapat melakukan aksi selanjutnya.

Kamu juga bisa menggunakan untuk validasi form dalam bentuk Combo Box, List Box, radio botton, atau input tanggal, input file dan lain sebagainya. Karena cukup menambahkan attribute “Required” (tanpa kutip) kedalam tag, apakah tag input atau tag select.

Mungkin untuk validasi form php atau html diatas memang sudah cukup untuk para pemula dalam membuat form-form yang memiliki validasi yang dapat mencegah human error, dan meminimalisir kesalahan user dalam menggunakan form. 

Apa Salahnya Coba Membuat Form Validasi Dengan Javascript? Untuk Validasi yang lebih baik, mengapa tidak?


EmoticonEmoticon