Ini contoh mudah bagaimana hendak membuat semakan sama ada input dimasukkan atau tidak pada form menggunakan jquery. Kita anggap html di bawah sudah berada di dalam framework bootstrap. Jadi <div>, <class> semua tu tak perlu diambil kisah.
<html> <head> <title>Test</title> <script type="text/javascript" src="script/jquery-x.x.x.min.js"></script> <script type="text/javascript"> function checklogin() { var userpass,usernama,output = true; usernama = document.logmasuk.myusername; userpass = document.logmasuk.mypassword; $("#userpassMessage").text("").removeClass("label label-danger"); $("#userpassMessage").text("").removeClass("label label-danger"); if(!usernama.value) { usernama.focus(); $("#myusername").innerHTML = "required"; $("#usernamaMessage").text("Masukkan username!").toggleClass("label label-danger"); output = false; } if(!userpass.value) { userpass.focus(); $("#mypassword").innerHTML = "required"; $("#userpassMessage").text("Masukkan password!").toggleClass("label label-danger"); output = false; } return output; } </script> </head> <body> <form action="checklogin.php" method="post" name="logmasuk" onSubmit="return checklogin();"> <div class="input-icon right"> <i class="fa fa-user"></i> <input id="myusername" type="text" placeholder="username" class="form-control" name="myusername" /> <span id="usernamaMessage"></span> </div> <div class="input-icon right"> <i class="fa fa-lock"></i> <input id="mypassword" type="password" placeholder="password" class="form-control" name="mypassword" /> <span id="userpassMessage"></span> </div> <div class="col-lg-9"> <button type="submit" class="btn btn-default" name="Submit">Sign In</button> </div> </form> </body> </html>
Panggil file js jquery pada header html. Ikutlah versi jquery mana yang disukai tapi pastikan ianya berjalan. Lagi baik yang terkini.
<script type="text/javascript" src="script/jquery-x.x.x.min.js"></script>
Cipta function untuk buat semakan. Sebagai contoh, function checklogin() {}. Function ini boleh dibuat di dalam <head> mahupun <body>. Apa yang penting, file jquery.js mestilah di dalam head, bukan body. Di dalam function ini, letak code untuk buat semakan.
Declare siap-siap dan dapatkan valuenya dengan memanggil data dari form. Dalam jquery, kita gunakan document, diikuti dengan nama form.
var userpass,usernama,output = true; usernama = document.logmasuk.myusername; userpass = document.logmasuk.mypassword;
Dalam jquery, bila kita guna tanda ni #,ia merujuk kepada ID sesuatu element dalam html tersebut. Jika dilihat pada code, kita guna <input id="myusername"... dan dalam js kita panggil semula menggunakan $("#myusername")...
removeClass digunakan pada awal code supaya javascript bersihkan dulu jika ada error sebelum ini yang telah terpapar.
Bagi keterangan lanjut dalam hal ini, rujuk jQuery Selectors
Ini digunakan bagi memasukkan text dan class ke dalam html <span id="usernamaMessage">.
$("#usernamaMessage").text("Masukkan username!").toggleClass("label label-danger");
Di dalam jQuery, biasakan diri menggunakan id berbanding name. Selain untuk elemen form, id juga boleh digunakan untuk elemen-elemen lain dalam html seperti <p>, <span>, <h1> dan lain-lain. Dan jquery boleh bermain dengan semua ini, bukan dengan form sahaja.