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 membuatkan sedikit perihal PHP adalah bagaimana cara membuat form validasi dengan menggunakan jquery. tentunya yang masih sederhana ya gan, hehehe…, ane gak sanggup yang ruwet-ruwet…
sepakat 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 arahan 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>
arahan dibawah ini berfungsi untuk mendefinisikan id dari form yang akan divalidasi. jadi sebelum form tanggapan divalidasi, user tidak akan sanggup melanjutkan ke halaman selanjutnya…
<script> $(document).ready(function(){ $("#formValidasi").validate(); }); </script> arahan css dibawah ini berfungsi memperlihatkan warna pada tabrakan pena error, jikalau ada form yang belum tervalidasi…
<style type="text/css"> label.error { color: red; padding-left: .5em; } </style> action=”cek_data.php” mirip arahan dibawah ini dimaksudkan adalah pada ketika 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 arahan 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> jikalau semua sesuai prosedur maka tampilannya akan mirip ini gan :
sekian dulu ya gan tutorial dari saya dan maaf banget kalau misalnya tutorial ini masih sangat berantakan…
oiya agan sanggup download tutorial lengkapnya, dibawah sudah saya sertakan dengan linknya gan….
jikalau agan ada yang masih samar-samar silahkan tinggal jejak dikomentar gan…
seee uuuuu di tutorial saya yang lainnya gan…
Sumber http://guz-kopyok.blogspot.com/
