Hai teman-teman semuanya, apa kabar semoga tetap sehat, kita lanjut lagi belajarnya ya teman-teman kali ini pembahasan kita tentang jquery, yang akan kita coba pada satu studi kasus membuat validasi inputan sederhana dengan jquery.
Jquery adalah salah satu library dari javascript yang berfungsi untuk membuat website lebih animatif atau terkesan tidak kaku, sedangkan validasi adalah suatu pengecekan apabila nilai yang kita inginkan sesuai atau tidak dengan yang kita mau, disini saya akan kombinasikan membuat validasi pada form namun dengan menggunakan jquery.
Oke untuk lebih jelasnya kita langsung saja praktek, silahakan teman-teman buat sebuah file dan ketikan script seperti berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype HTML> <html> <head> <title></title> <style> #warning{background:red; padding:10px; width:200px;display: none;margin-top:10px; color:#fff} </style> </head> <body> <form method="post" action="" role="form"/> <input type="text" name="username" id="username"> <button>Login</button> <div id="warning">Isi Dulu Formnya</div> </form> </body> </html> |
Saya membuat sebuah form didalamnya terdapat satu inputan username, lalu saya memberikan sebuah div dengan id warning yang saya sembunyikan yang nanti saya munculkan ketika form tidak sesuai dengan yang kita inginkan,
jika teman-teman save maka hasilnya akan seperti berikut ini:
oke sekarang kita masuk pada bagian scripting jquerynya, silahakan teman-teman tambahkaan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var user = $("#username").val(); $("button").click(function(){ if(user == ""){ $("#warning").fadeIn("slow"); return false; }else{ alert(user); } }); }); </script> |
Pertama saya mereload library dari jquery lalu saya membuat sebuah variable yang nilainya diambil dari inputan dengan id username dengan menggunakan method val(), laluy saya membuat sebuah event click pada button yang apabila tombol itu diklik maka menjalankan fungsi pengecekan apabila nilai dari variable user kosong maka akan memunculkan id warning yaitu div yang tadi saya hilangkan jika tidak kosong maka akan muncul alert.
Gambar diatas apabila inputannya tidak diisi,
Oke teman-teman saya kira cukup sampai disini dulu tutorial kali ini tentang membuat validasi inputan sederhana dengan jquery, semoga bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,
Terima kasih