Validasi Input Form dengan JQuery

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Validasi input dalam membuat aplikasi sangatlah penting untuk dilakukan. Hal ini bertujuan untuk mengantisipasi hal-hal yang tidak diinginkan. Lebih-lebih untuk aplikasi berbasis website. Di Internet semua bersifat tabu. kita tidak bisa membatasi hal-hal yang dapat dilakukan seorang pengunjung pada halaman website kita. hal ini termasuk pada inputan form. menurut beberapa sumber yang saya baca, kerentanan suatu halaman website pada aktifitas hacking banyak ditemukan pada inputan form.

Validasi Input Form dengan JQuery

Validasi input adalah cara yang digunakan oleh programmer untuk memeriksa inputan dari pengujung atau user. Sesuai atau tidaknya dengan aturan-aturan yang telah dibuat. Jika inputan sesuai maka proses akan dilanjutkan ke halaman berikutnya namun jika tidak sesuai maka akan muncul sebuah pesan kesalahan.

Membuat validasi input dapat kita lakukan melalui server side ataupun client side scripting. Hal tersebut tentu saja memiliki kelebihan dan kekurangannya tersendiri. Namun saya tidak akan membahasnya disini melainkan saya akan berbagi sedikit trik tentang bagaimana melakukan validasi form menggunakan JQuery. disini saya contohkan untuk memvalidasi checkbox, input text dan combobox atau select. Download Source Codenya disini!

 <style type="text/css">
  .error {
   font-size:small;
   color:red;
  }
 </style> 
   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript" src="jquery.validate.min.js"></script>
   <script type="text/javascript">
   
  var $jnoc = jQuery.noConflict();
  
  $jnoc(document).ready(function(){
   
     $jnoc('#laporkan').validate({
      
    rules: {
     'carapas[]': {
      required: true,
      maxlength: 2
     }
    },
    messages: {
     nama: {
      required : "Nama Korban Pasung Harus diisi"
     },
        kab: {
      required : "Pilih Kabupaten!"
     },
        'carapas[]' : {
      required : "<b>Salah Satu Cara Pasung harus dipilih</b> "
     }
    }
   });
   
  });
  </script>

<div class="clear"></div>

 
<form class="form-horizontal" method="post" action="" enctype="multipart/form-data" id="laporkan">
<fieldset>

<!-- Form Name -->
<legend><center style="padding-bottom:10px;">Lengkapi Form Berikut</center></legend>

<fieldset>
<legend>Data Korban Pasung</legend>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="fn">Nama Lengkap</label>  
  <div class="col-md-4">
  <input id="nama" name="nama" type="text" placeholder="Nama Lengkap" class="form-control input-md required" value="<?php if (isset($_POST['nama'])){ echo $_POST['nama']; }?>"/>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="selectbasic">Kabupaten</label>
  <div class="col-md-4">
    <select id="kab" name="kab" class="form-control input-md required" style="color:black">
      <option value="">-- PILIH --</option>
      <option value="Mataram">Mataram</option>
      <option value="Lombok Barat">Lombok Barat</option>
      <option value="Lombok Utara">Lombok Utara</option>
    </select>
 
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="selectbasic">Cara Pemasungan</label>
  <div class="col-md-4">

<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Balok Kayu">Balok Kayu</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Rantai">Rantai</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Tali">Tali</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Kurung">Kurung</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" id="lainnya" value="Lainnya" >Lainnya</label>
</div>

 </div>
</div>

</div>
</fieldset>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-4">
    <button id="submit" name="submit" class="btn btn-primary">K I R I M</button>
    </div>
</div>

</fieldset>
</form>
  
</div>
  
    </div>
  </div>
</div>
<!-- service end -->

<?php 
if (isset($_POST['submit'])){
 
echo $_POST['nama']; 
 
}?>

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.