Membuat Validasi Form Paling Mudah

Pemrograman Sebuah aplikasi tidak lah lepas dari yang namanya form, form disini berfungsi untuk berpagai keperluan aplikasi pengentrian data, pencarian, edit data dan laian, tapi hal yang di perlukan adalah gimana cara memfilter data yang akan di entrikan sesuai apa yang kita inginkan (validasi form)
Paling gampang adalah dengan menggunakan framwork jquery yang benama jquery validate;
JQuery Validate bisa anda gunakan berdasarkan mensinkronkan name pada form anda misalkan

"id="form_div" name="addnew_form" method="post"

name form dengan nama=addnew_form akan di sinkronkan dengan nama selectot javascript yang berfungsi utk validasi data pada input data form anda;
berikut sekilas contohnya;


Berikut coding javascript untuk validasi:

<script type="text/javascript">
$(document).ready(function() {
$("#form_div").validate(
{
rules:{
kode:{
required:true,
minlength:10
},
nama:{
required:true
},
jenis:{
required:true
},
tipe:{
required:true
},
satuan:{
required:true
},
stk_min:{
required:true,
number:true
},
stk_max:{
required:true,
number:true
}

},
messages:{
kode:{
required:"Masukkan Kode Barang",
minlength:"Masukan Kode Minimal 10 digit",

},
nama:{
required:"Masukkan nama Barang",
},
jenis:{
required:"Masukkan Jenis Barang",
},
tipe:{
required:"Masukkan Tipe Barang",
},
satuan:{
required:"Masukan Nilai Satuan",
},
stk_min:{
required:"Masukkan Nilai Stok Minimal",
},
stk_max:{
required:"Masukkan Nilai Stok Maximum",
}
}
});
});

</script>


Perhatikan selector pada script diatas "#form_div" akan di sesuaikan pada tag html sebagai berikut:

<div id="OrangeWhiteBox">

<div id="formM">
<h1>Master Barang </h1>
<form id="form_div" name="addnew_form" method="post" action="execute_addnew.php">
<label><span>Kode</span>
<input name="kode" type="text" class="inputM" id="kode" size="15" maxlength="20" />
</label>

<label><span>NAMA </span>
<input name="nama" type="text" class="inputM" id="nama" size="20" />
</label>

<label><span>JENIS </span>
<input name="jenis" type="text" class="inputM" id="jenis" size="20" maxlength="30" />
</label>
<label><span>TIPE </span>
<input name="tipe" type="text" class="inputM" id="tipe" size="20" />
</label>

<label><span>SATUAN</span>
<input name="satuan" type="text" class="inputM" id="satuan" size="6" maxlength="6" />
</label>

<label><span>STK MIN </span>
<input name="stk_min" type="text" class="inputM" id="Stk_min" size="9" />
</label>
<label><span>STK MAX </span>
<input name="stk_max" type="text" class="inputM" id="stk_max" size="6" maxlength="6" />
</label>

<label><span>HRG BELI </span>
<input name="hrg_beli" type="text" class="inputM" id="hrg_beli" size="9" maxlength="12" />
</label>

<label><span>HRG JUAL </span>
<input name="hrg_jual" type="text" class="inputM" id="hrg_jual" size="9" maxlength="12" />
</label>

<label><span>HPP </span>
<input name="hpp" type="text" class="inputM" id="hpp" size="9" maxlength="12" />
</label>

<label><span>KET </span>
<input name="keterangan" type="text" class="inputM" id="keterangan" size="25" maxlength="35" />
</label>

<label><span>KD SUPLIER </span>
<input name="kd_suplier" type="text" class="inputM" id="kd_suplier" size="15" maxlength="15" />
</label>

<label><span>SALDO AWAL</span>
<input name="hrg_jual" type="text" class="inputM" id="hrg_jual" size="9" maxlength="12" />
</label>

<label><span>MASUK </span>
<input name="masuk" type="text" class="inputM" id="masuk" size="15" maxlength="25" />
</label>

<label><span>KELUAR</span>
<input name="keluar" type="text" class="inputM" id="keluar" size="15" maxlength="20" />
</label>

<label><span>SALDO AKHIR</span>
<input name="saldo_akhir" type="text" class="inputM" id="saldo_akhir" size="15" maxlength="20" />
</label>


<label>
<div class="spacer" id="btn_link"><button type="sumbit" id="save">SAVE</button></div>

</label>


</form>
</div>

</div>


Untuk menyesuaikan tampilan form diatas harus anda sisipkan script css sebagai berikut

<style type="text/css">

body,td,th {
font-family: Trebuchet MS;
font-size: 11px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #0099FF;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #0099FF;
}
a:hover {
text-decoration: none;
color: #009900;
}
a:active {
text-decoration: underline;
color: #0099FF;
}
#OrangeWhiteBox {
background-color:#FFFBF2;
padding: 5px;
margin-bottom:5px;
border:2px solid #FFE9D2;
width:320px;
}
#GreyWhite {
background-color: #FBFBFB;
padding: 5px;
margin-bottom:5px;
border:2px solid #F4F4F4;
width:320px;
text-align:center;
}
/* BOX DESIGN BY dr.emi */

#formM { margin:0px;padding-left:20px;padding-bottom:20px; width:350px;}
#formM h1 { padding-left:72px;padding-top:10px; font-size:18px;padding-bottom:10px; color:#990000; }
#formM p { padding-left:72px;padding-top:10px; font-size:11px;padding-bottom:10px; }
#formM .inputM{
border:1px solid #C0C0C0;
color:#666666;
background:url(beautifull-form.gif) 0 0 repeat-x; /*support IE, FF*/
height:20px;
font-size:16px;
}
#formM .textareaM{
border:1px solid #C0C0C0;
color:#666666;
font-size:16px;
}
#formM label{
display:block;
margin-bottom:10px;
color:#666666;
}

#formM label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:left;
font-weight:bold;
font-size:12px;
}
#formM .spacer{margin-left:80px;
margin-bottom:10px;
font-size:11px;
color:#555555;
}
#formM .buttonM{
background:url(coklat.gif) 0 0 no-repeat;
border:1px solid #3b6e22;
height:26px; width:100px;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
font-weight:bold;
}
#formM label.error {
width: 220px;
display: block;
list-style:none;
color: red;
font-size:11px;
padding-left: 20px;
background:url(images/unvalid.gif) no-repeat;
}
#formM input.error{
background:#F99;
color:#F00;
border-color:#CF0;
border:1px;
}
#formM label.checked{
padding-left: 20px;
background:url(images/valid.gif) no-repeat;
}
.spacerA { clear:both; height:20px; margin:0px; padding:0px; }

</style>

Oya... jangan lupa panggil file framwork jquery dan library jquery validasi dengan cara sepeti ini;

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

perhatikan rules: pda javascript diatas sesuaikan dengan name pada tag input form anda.... Selamat Mencoba... semoga berhasil, :(