Membuat validasi form menggunakan message box dengan JQuery

Membuat validasi form menggunakan message box dengan JQuery

20.27.00
Haiii... apa kabar sobat-sobat semuanya, pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat validasi form dengan memanfaatkan Library Javascript dari Jquery. Berikut langkah-langkahnya :
1. Langkah awal adalah dengan mendowload dulu file Jquery disini
2. Selanjutnya buatlah design form HTML untuk inputan dengan nama index.html dan jangan lupa untuk dijadikan satu lokasi/folder dengan file Jquery yang telah di download sebelumnya.
Berikut adalah source codenya:

<!doctype html>
<html>
<head>
<title>Validasi Data Melalui onsubmit</title>
</head>
<body>
<form name="formTes" action="" method="post" onsubmit="return cekData();">
<table>
<tr><td>Nama:</td><td><input type="text" name="nama" maxlength="35" size="35" /></td>
<tr><td>Alamat:</td><td><input type="text" name="alamat" maxlength="60" size="60" /></td>
<tr><td>Kota:</td><td><input type="text" name="kota" maxlength="20" size="20" /></td>
<tr><td>Kode Pos:</td><td><input type="text" name="kodepos" maxlength="5" size="6" /></td>
<tr><td>Jenis Kelamin</td>
<td><select name='jk' >
<option value=''>=pilih=</option>
<option value='laki-laki'>Laki-laki</option>
<option value='perempuan'>Perempuan</option>
</select>
<td>
<tr><td>e-mail:</td><td><input type="text" name="email" /></td>
<tr><td colspan="2"><input type="submit" value="Kirim" /></td></tr>
</table>
</form>
</body>
</html>
view raw index.html hosted with ❤ by GitHub


3. Lalu pada file index.html tadi tambahkan script javascript berikut pada tag html <head> ... </head>

<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript">
function cekData()
{
// Cek isi kotak teks nama
if (formTes.nama.value == "")
{
$("document").ready(function () {
alert("Nama harus di isi");
});
formTes.nama.focus();
return false;
}
// Cek isi kotak teks alamat
if (formTes.alamat.value == "")
{
$("document").ready(function () {
alert("Alamat harus di isi");
});
formTes.alamat.focus();
return false;
}
// Cek isi kotak teks kota
if (formTes.kota.value == "")
{
$("document").ready(function () {
alert("Kota harus di isi");
});
formTes.kota.focus();
return false;
}
// Cek isi kode pos
if (formTes.kodepos.value.length != 5)
{
$("document").ready(function () {
alert("Kode Pos Maksimal 5 Digit");
});
formTes.kodepos.focus();
return false;
}
var kar;
for (var i=0; i<formTes.kodepos.value.length; i++)
{
kar=formTes.kodepos.value.substr(i,1);
if ((kar <="0") || (kar >= '9'))
{
$("document").ready(function () {
alert("Kode pos harus berisi 5 angka");
});
formTes.kodepos.focus();
return false;
}
}
// Cek email
if (formTes.email.value == "")
{
$("document").ready(function () {
alert("Email Harus Diisi");
});
formTes.email.focus();
return false;
}
var filter = new RegExp(
"^([a-zA-Z0-9_\.\-])+([a-zA-Z0-9])+\@" +
"(([a-zA-Z0-9\-])+\.)+" +
"([a-zA-Z0-9]{2,4})+$");
if (!filter.test(formTes.email.value))
{
$("document").ready(function () {
alert("Masukkan Email yg Valid");
});
formTes.email.focus();
return false;
}
// Cek Combobox Jenis Kelamin
if (formTes.jk.value == "")
{
$("document").ready(function () {
alert("Pilih Jenis Kelamin");
});
formTes.nama.focus();
return false;
}
else
return true;
}
</script>
view raw gistfile1.txt hosted with ❤ by GitHub


4. Secara keseluruhan source kodenya adalah sebagai berikut.

<!doctype html>
<html>
<head>
<title>Validasi Data Melalui onsubmit</title>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript">
function cekData()
{
// Cek isi kotak teks nama
if (formTes.nama.value == "")
{
$("document").ready(function () {
alert("Nama harus di isi");
});
formTes.nama.focus();
return false;
}
// Cek isi kotak teks alamat
if (formTes.alamat.value == "")
{
$("document").ready(function () {
alert("Alamat harus di isi");
});
formTes.alamat.focus();
return false;
}
// Cek isi kotak teks kota
if (formTes.kota.value == "")
{
$("document").ready(function () {
alert("Kota harus di isi");
});
formTes.kota.focus();
return false;
}
// Cek isi kode pos
if (formTes.kodepos.value.length != 5)
{
$("document").ready(function () {
alert("Kode Pos Maksimal 5 Digit");
});
formTes.kodepos.focus();
return false;
}
var kar;
for (var i=0; i<formTes.kodepos.value.length; i++)
{
kar=formTes.kodepos.value.substr(i,1);
if ((kar <="0") || (kar >= '9'))
{
$("document").ready(function () {
alert("Kode pos harus berisi 5 angka");
});
formTes.kodepos.focus();
return false;
}
}
// Cek email
if (formTes.email.value == "")
{
$("document").ready(function () {
alert("Email Harus Diisi");
});
formTes.email.focus();
return false;
}
var filter = new RegExp(
"^([a-zA-Z0-9_\.\-])+([a-zA-Z0-9])+\@" +
"(([a-zA-Z0-9\-])+\.)+" +
"([a-zA-Z0-9]{2,4})+$");
if (!filter.test(formTes.email.value))
{
$("document").ready(function () {
alert("Masukkan Email yg Valid");
});
formTes.email.focus();
return false;
}
// Cek Combobox Jenis Kelamin
if (formTes.jk.value == "")
{
$("document").ready(function () {
alert("Pilih Jenis Kelamin");
});
formTes.nama.focus();
return false;
}
else
return true;
}
</script>
</head>
<body>
<form name="formTes" action="" method="post" onsubmit="return cekData();">
<table>
<tr><td>Nama:</td><td><input type="text" name="nama" maxlength="35" size="35" /></td>
<tr><td>Alamat:</td><td><input type="text" name="alamat" maxlength="60" size="60" /></td>
<tr><td>Kota:</td><td><input type="text" name="kota" maxlength="20" size="20" /></td>
<tr><td>Kode Pos:</td><td><input type="text" name="kodepos" maxlength="5" size="6" /></td>
<tr><td>Jenis Kelamin</td>
<td><select name='jk' >
<option value=''>=pilih=</option>
<option value='laki-laki'>Laki-laki</option>
<option value='perempuan'>Perempuan</option>
</select>
<td>
<tr><td>e-mail:</td><td><input type="text" name="email" /></td>
<tr><td colspan="2"><input type="submit" value="Kirim" /></td></tr>
</table>
</form>
</body>
</html>
view raw index.html hosted with ❤ by GitHub


5. Dan berikut adalah hasil dari percobaan diatas.



Selamat mencoba dan teruslah bercoding :D


EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
:lv
Langganan: Posting Komentar (Atom)