misi gan...ane punya koding buat validasi form pake Jquery nih...
Spoiler for kodingan :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
[removed][removed]
[removed][removed]
[removed]
$(document).ready(function(){
$("#registrasi").validate({
rules: {
txtTitle: "required",
filePic: "required",
fileTOC: "required",
txtAuthor: "required",
txtPublisher: "required",
txtCategory: {
required:true,
//remote:"generator/cekCategory2.php",
},
txtStock: {
required:true,
number:true,
min:1
},
txtEdition: {
required:true,
number:true,
min:1
},
txtYear: {
required:true,
number:true,
minlength:1
},
},
messages: {
txtTitle: "<br><strong style='color:red'>Fill Title </strong>",
filePic: "<br><strong style='color:red'>Fill Picture </strong>",
fileTOC: "<br><strong style='color:red'>Fill Table of Contents </strong>",
txtAuthor: "<br><strong style='color:red'>Fill Author </strong>",
txtPublisher: "<br><strong style='color:red'>Isi Publisher </strong>",
txtCategory:{
required:"<br><strong style='color:red'>Fill Category </strong>" ,
remote:"<br><strong style='color:red'>Category not Registered</strong>" ,
},
txtEdition:{
required:"<br><strong style='color:red'>Fill Edition </strong>" ,
number:"<br><strong style='color:red'>Fill Edition with number</strong>" ,
min:"<br><strong style='color:red'>Fill Edition min 1</strong>" ,
},
txtStock:{
required:"<br><strong style='color:red'>Fill Stock </strong>" ,
number:"<br><strong style='color:red'>Fill Stock with number</strong>" ,
min:"<br><strong style='color:red'>Fill Stock min 1</strong>" ,
},
txtYear:{
required:"<br><strong style='color:red'>Fill Year </strong>" ,
number:"<br><strong style='color:red'>Fill Year with number</strong>" ,
minlength:"<br><strong style='color:red'>Fill Year with 4 digits</strong>" ,
},
},
success: function(label) {
label.html("<strong>OK</strong>").addClass('valid');
},
submitHandler: function() {
if(confirm("Are you sure data is right??")){
document.getElementById("registrasi").submit()
}
}
});
});
[removed]
<body>
<form action="proses/doAddBooks.php" method="post" enctype="multipart/form-data" id="registrasi">
<table>
<tr>
<th align="left" scope="row">Book Title</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input type="text" name="txtTitle" id="txtTitle" /></td>
</tr>
<tr>
<th align="left" scope="row">Book Author</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input type="text" name="txtAuthor" id="txtAuthor" /></td>
</tr>
<tr>
<th align="left" scope="row">Category</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input type="text" name="txtCategory" id="txtCategory" /></td>
</tr>
<tr>
<th align="left" scope="row">Book Edition</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input name="txtEdition" type="text" id="txtEdition" size="2" maxlength="2" /></td>
</tr>
<tr>
<th align="left" scope="row">Book Publisher</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input type="text" name="txtPublisher" id="txtPublisher" /></td>
</tr>
<tr>
<th align="left" scope="row">Book Year</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input name="txtYear" type="text" id="txtYear" size="4" maxlength="4" /></td>
</tr>
<tr>
<th align="left" scope="row">Book Stock</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input name="txtStock" type="text" id="txtBrand3" size="4" maxlength="4" /></td>
</tr>
<tr>
<th align="left" scope="row">Book Picture</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input type="file" name="filePic" id="filePic" /></td>
</tr>
<tr>
<th align="left" scope="row">Table Of Contents</th>
<td align="left"><strong>:</strong></td>
<td align="left"><input type="file" name="fileTOC" id="fileTOC" /></td>
</tr>
<tr>
<th align="left" scope="row"> </th>
<td align="left"> </td>
<td align="left"><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
nah disitu ane mau ringkasi di bagian
Spoiler for kodingan validasi Jquery :
[removed]
$(document).ready(function(){
$("#registrasi").validate({
rules: {
txtTitle: "required",
filePic: "required",
fileTOC: "required",
txtAuthor: "required",
txtPublisher: "required",
txtCategory: {
required:true,
//remote:"generator/cekCategory2.php",
},
txtStock: {
required:true,
number:true,
min:1
},
txtEdition: {
required:true,
number:true,
min:1
},
txtYear: {
required:true,
number:true,
minlength:1
},
},
messages: {
txtTitle: "<br><strong style='color:red'>Fill Title </strong>",
filePic: "<br><strong style='color:red'>Fill Picture </strong>",
fileTOC: "<br><strong style='color:red'>Fill Table of Contents </strong>",
txtAuthor: "<br><strong style='color:red'>Fill Author </strong>",
txtPublisher: "<br><strong style='color:red'>Isi Publisher </strong>",
txtCategory:{
required:"<br><strong style='color:red'>Fill Category </strong>" ,
remote:"<br><strong style='color:red'>Category not Registered</strong>" ,
},
txtEdition:{
required:"<br><strong style='color:red'>Fill Edition </strong>" ,
number:"<br><strong style='color:red'>Fill Edition with number</strong>" ,
min:"<br><strong style='color:red'>Fill Edition min 1</strong>" ,
},
txtStock:{
required:"<br><strong style='color:red'>Fill Stock </strong>" ,
number:"<br><strong style='color:red'>Fill Stock with number</strong>" ,
min:"<br><strong style='color:red'>Fill Stock min 1</strong>" ,
},
txtYear:{
required:"<br><strong style='color:red'>Fill Year </strong>" ,
number:"<br><strong style='color:red'>Fill Year with number</strong>" ,
minlength:"<br><strong style='color:red'>Fill Year with 4 digits</strong>" ,
},
},
success: function(label) {
label.html("<strong>OK</strong>").addClass('valid');
},
submitHandler: function() {
if(confirm("Are you sure data is right??")){
document.getElementById("registrasi").submit()
}
}
});
});
[removed]
kira2 agan bisa ringkas ga jadi function PHP, soalnya ane capek copas2 koding yg berulang buat form yg berbeda nantinya...
jadi nanti kira2 ane bisa panggil dengan cara validasi("txtTitle","required","fill Title") gitu. masalahnya tiap komponen form punya rules dan message yg beda2.
jadi functionnya kira2 kyk gini
Spoiler for ringkasan kira2 :
<?php
function validasi($komponenForm,$rules,$message){
?>
[removed]
$(document).ready(function(){
.
.
.
.
.
});
[removed]
<?php
}
?>
klo bisa, nanti ane doain biar sukses smua proyeknya..amin..(lum iso jadi ga bisa ngirim cendol...maap ya gan...
)
note: ini pake plugin Jquery Validate yg bisa agan dapet di
sini baru inget disini tag script dimatiin...