Membuat Validasi Form Sederhana dengan Jquery

Halo selamat malam sahabat blogger semuanya. kembali lagi bersama ane guzko di coretan coretan kecil ane ini yang mungkin sedikit bermanfaat bagi agan agan semua.
kali ini ane mau berbagi sedikit tentang PHP yaitu bagaimana cara membuat form validasi dengan menggunakan jquery. tentunya yang masih sederhana ya gan, hehehe..., ane gak bisa yang ruwet-ruwet...
oke langsung aja gan, cekidot...

dalam pembuatan aplikasi ini ada 3 langkah gan :

1. Siapin dulu jquery (download disini) dan jquery.validate (download disini).
2. Membuat Halaman index.php
3. Membuat Halaman cek_data.php

2. MEMBUAT HALAMAN INDEX.PHP
silahkan agan buka php editor agan dan tulis kode berikut ini. Biasakan untuk menulis ya gan,jangan hanya langsung copy paste. Jika agan terbiasa dengan menulis kode, lama kelamaan agan akan mengerti dan hafal...

<html>
  <head>
   <title>Guzko Validasi Tutorial</title>
   <script src="js/jquery.js"></script>
   <script src="js/jquery.validate.js"></script>
   <script>
       $(document).ready(function(){
           $("#formValidasi").validate();
        });
   </script>

   <style type="text/css">
       label.error {
           color: red; padding-left: .5em;
       }
   </style>
  </head>
   <body>
     <form id="formValidasi" method="post" action="cek_data.php">
       <table border="1" align="center">
<tr><td>Nama Anda</td><td>:</td><td><input name="nama" id="nama" class="required" minlength="3" /></td></tr>
<tr><td>Email Anda</td><td>:</td><td><input name="email" class="required email" /></td></tr>
<tr><td>Usia Anda</td><td>:</td><td><input name="usia" class="required number" /></td></tr>
<tr><td>Username</td><td>:</td><td><input name="username" /></td></tr>
</table>
<p align="center">
       <input class="submit" type="submit" value="Cek Kelengkapan Data" name="btnCek" id="btnCek" />
       </p>
</form>
</body>
</html>

kedua file ini harus berada dalam direktori yang sama ya gan...

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>

kode dibawah ini berfungsi untuk mendefinisikan id dari form yang akan divalidasi. jadi sebelum form selesai divalidasi, user tidak akan bisa melanjutkan ke halaman selanjutnya...

<script>
       $(document).ready(function(){
           $("#formValidasi").validate();
        });
</script>

kode css dibawah ini berfungsi memberikan warna pada tulisan error, jika ada form yang belum tervalidasi...

<style type="text/css">
       label.error {
           color: red; padding-left: .5em;
       }
</style>

action="cek_data.php" seperti kode dibawah ini dimaksudkan adalah pada saat ditekan tombol cek validasi oleh user dan aplikasi berhasil memvalidasi semua form, maka user akan di direct ke link cek_data.php yang akan menampilkan data-data yang diinput user.

<form id="formValidasi" method="post" action="cek_data.php">
       <table border="1" align="center">
<tr><td>Nama Anda</td><td>:</td><td><input name="nama" id="nama" class="required" minlength="3" /></td></tr>
<tr><td>Email Anda</td><td>:</td><td><input name="email" class="required email" /></td></tr>
<tr><td>Usia Anda</td><td>:</td><td><input name="usia" class="required number" /></td></tr>
<tr><td>Username</td><td>:</td><td><input name="username" /></td></tr>
</table>
<p align="center">
       <input class="submit" type="submit" value="Cek Kelengkapan Data" name="btnCek" id="btnCek" />
       </p>
</form>

3. MEMBUAT HALAMAN CEK DATA.PHP

pada halaman ini, berfungsi untuk menampilkan data-data yang telah diinputkan oleh user sebelumnya pada form index. silahkan agan buat baru file php dan ketikkan kode berikut ini :

<?php
 if(isset($_POST['btnCek'])) {
  $nama = $_POST['nama'];
  $email = $_POST['email'];
  $usia = $_POST['usia'];
  $username = $_POST['username'];
 }

?>
<html>
 <head>
 </head>
 <body>
  <p>
:::Berikut data yang telah anda inputkan:::</p>
<p>
Nama Yang Diinputkan : <?php echo $nama;?></p>
<p>
Email yang diinputkan : <?php echo $email;?></p>
<p>
Usia yang diinputkan : <?php echo $usia;?></p>
<p>
Username yang diinputkan : <?php echo $username;?></p>
<p>
Klik link berikut untuk kembali <a href="index.php">Keluar</a></p>
</body>
</html>

jika semua sesuai prosedur maka tampilannya akan seperti ini gan :

sekian dulu ya gan tutorial dari saya dan maaf banget kalau misalnya tutorial ini masih sangat berantakan...
oiya agan bisa download tutorial lengkapnya, dibawah sudah saya sertakan dengan linknya gan....
jika agan ada yang masih kurang jelas silahkan tinggal jejak dikomentar gan...
seee uuuuu di tutorial saya yang lainnya gan...

DOWNLOAD PROJECT