Friday, July 26, 2019

Contoh Javascript Dalam Membuat Validasi Form Dengan Javascript Alert Message

Validasi Form Dengan Alert Javascript - Hai sobat semuanya. Kembali lagi di anakit yang pada pokok pembahasan kali ini ialah membuat form validasi dengan javascript atau membuat validasi form dengan javascript untuk mengecek apakah form sudah diisi semuanya. Jadi dengan valiadasi form masih kosong ini berguna untuk mencegak human error yang lalai tidak mengisi form secara keseluruhan.

Validasi Form Dengan Javascript


Pada artikel sebelumnya sudah ada tentang membuat validasi form dengan html5, dimana attribute yang disediakan dalam memvalidasi setiap form input yaitu menggunakan “Required”. Nah.. pada kesempatan ini tentunya kita membuat system validasi textfield di form html dengan menggunakan jquery atau javascript.

Jadi, kita menambahkan sebuah function dalam bentuk javascript didalam file yang terdapat form untuk kemudian di berikan tambahan validasi form masih kosong atau tidak.

Manfaat Membuat Validasi Form Dengan Javascript


Mengapa harus membuat validasi dengan javascript? Ya, tentu ada sebagian orang yang bertanya mengenai penambahan script untuk mengecek apakah semua data sudah diisi atau bukan dalam bentuk javascript code tersebut,

Membuat validasi form input di php atau pun html memiliki banyak manfaat, bisa untuk mencegah pengiriman data kedatabase atau eksekusi data karena data yang diisi belum lengkap dan masih ada yang masih kososng, kemudian meminimalisir terjadinya human error. Bisa menambah validasi input hanya angka, atau validasi input hanya huruf dan masih banyak lagi manfaatnya dari membuat validasi form dengan javascript.

Membuat Validasi Input Masih Kosong Dengan JavaScript


Untuk membuat validasi form dengan javascript dan tentunya dalam hal ini adalah validasi untuk form masih kosong atau belum diisi. saya memberikan 2 versi penulisan javascriptnya untuk memvalidasi data yang masih kosong di form html atau php.
Sebagai langkah awal, kita buat dulu formnya. Dalam hal ini saya membuat form register sederhana.



<!DOCTYPE html>
<html>
<head>
<title>Validasi Form Javascript</title>
</head>
<body>
  <center>
    <h2>Validasi Register</h2>
  </center>  
  <br/>
<form action="" method="post" onSubmit="return validasi_data(this)"></form>
<table border="0" width="400" align="center">
  <tr>
    <th align="left">Masukkan Nama</th>
    <td>:</td>
    <td><input type="text" name="nama" id="nama"></td>
  </tr>
    <tr>
    <th align="left">Jenis Kelamin</th>
    <td>:</td>
    <td><input type="radio" name="jeniskelamin" value="L" id="jeniskelamin" checked="checked">Laki-laki
        <input type="radio" name="jeniskelamin" value="P">Perempuan</td>
  </tr>
    <tr>
    <th align="left">Tempat Lahir</th>
    <td>:</td>
    <td><input type="text" name="tempat" id="tempat"></td>
  </tr>
    </tr>
    <tr>
    <th align="left">Tahun Lahir</th>
    <td>:</td>
    <td><input type="date" name="tgl" id="tgl"></td>
  </tr>
  <tr>
    <td colspan="3" align="center" height="50"><input type="submit" name="" id="" value="Register"></td>
  </tr>
</table>
</form>
</body>
</html>
Diatas adalah contoh form sederhana sebagai bahan contoh untuk nantinya dibuat validasi javascript untuk mengecek apakah form sudah diisi atau belum.

Perhatikan pada tag form ada ditambahkan onSubmit="return validasi_data(this), ini berguna apabila nantinya ditekan tombol resgiter yang berguna sebagai submit data, akan ke function validasi_data terlebih dahulu untuk melakukan validasi javascript guna mengecek form.

Kemudian kita code javascriptnya untuk validasi form tersebut.


<script type="text/javascript">
  function validasi_data(form) {  
    if (form.nama.value=="") {
      alert('nama  harus di isi !');
      form.nama.focus();
      return false;
    }else if(form.tempat.value=="") {
      alert('Tempat Lahir harus di isi !');
      form.tempat.focus();
      return false;
    }
  }
</script>
Tempatkan javascript tersebut tepat dibawah </body> yang nantinya. Script secara keseluruhan akan seperti berikut ini



<!DOCTYPE html>
<html>
<head>
<!--
ANAKIT.ID
-->
<title>Validasi Form Javascript</title>
</head>
<body>
  <center>
    <h2>Validasi Register</h2>
  </center>  
  <br/>
<form action="" method="post" onSubmit="return validasi_data(this)">
<table border="0" width="400" align="center">
  <tr>
    <th align="left">Masukkan Nama</th>
    <td>:</td>
    <td><input type="text" name="nama" id="nama"></td>
  </tr>
    <tr>
    <th align="left">Jenis Kelamin</th>
    <td>:</td>
    <td><input type="radio" name="jeniskelamin" value="L" id="jeniskelamin" checked="checked">Laki-laki
        <input type="radio" name="jeniskelamin" value="P">Perempuan</td>
  </tr>
    <tr>
    <th align="left">Tempat Lahir</th>
    <td>:</td>
    <td><input type="text" name="tempat" id="tempat"></td>
  </tr>
    </tr>
    <tr>
    <th align="left">Tahun Lahir</th>
    <td>:</td>
    <td><input type="date" name="tgl" id="tgl"></td>
  </tr>
  <tr>
    <td colspan="3" align="center" height="50"><input type="submit" name="" id="" value="Register"></td>
  </tr>
</table>
</form>
</body>
<script type="text/javascript">
  function validasi_data(form) {  
    if (form.nama.value=="") {
      alert('nama  harus di isi !');
      form.nama.focus();
      return false;
    }else if(form.tempat.value=="") {
      alert('Tempat Lahir harus di isi !');
      form.tempat.focus();
      return false;
    }
  }
</script>
</html>

Nah ketika program dijalankan, kira-kira akan seperti berikut ini

script javascript validasi input kosong dengan pesan alert
Gambar Contoh Validasi Form Dengan Javascript Alert Message



Akan terlihat alert dengan tulisan “nama harus diisi ketika dilakukan submit register dan ternyata nama belum terisi. 

Kemudian ada fungsi form.nama.focus(); yang berguna, ketika di tekan ok, maka otomatis cursor langsung mengarah ke form mana yang belum diisi.

Begitu juga ketika tempat lahir belum diisi dan dilakukan submit. Javascript akan melakukan validasi dan memberikan pesar alert  “tempat lahir harus diisi”.

membuat pesan ketika form masih kosong dengan menggunakan javascript yang akan memberikan pesan alert apabila form masih kosong
Gambar Validasi Input Kosong Dengan Javascript 

Jadi selama form tersebut masih kosong dan dilakukan submit. Javascript akan beraksi dengan memberikan pesan alert secara terus menerus sampai form tersebut benar-benar diisi.

Bagaimana dengan validasi Radio javascript dan validasi Option javascript?

Baca Juga : Membuat Validasi Radio dengan Javascript atau Membuat Validasi Option dengan Javascript.

Demikianlah pembahasan tentang membuat validasi form input dengan javascript, dimana dengan ini kamu bisa mengetahui pentingnya membuat validasi seperti alert pada form php atau html. Sehingga membantu kita menerima data yang di perlukan dari user secara lengkap.



EmoticonEmoticon