Kalian tentu pernah melihat Form validasi yang mengeluarkan pesan error ketika berpindah ke Text lain pada artikel ini akan kita implementasikan pada Form yang sudah kalian buat pada artikel sebelumnya (klik disini bila belum melihatnya) akan kita sedikit memodifikasi dengan menambahkan javascript, kalian tidak perlu melalukan pengkodean untuk memfilter text yang diinputkan oleh user akan tetapi sudah banyak plugin jquery yang dapat memfilter text dengan baik. Saya menggunakan plugin yang dibuat oleh bassistance yang mudah dan sangat simple untuk di implementasikan pada website yang akan kita buat.

1. Tambahkan script berikut pada Tag head (</head>)

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

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

 

<script type="text/javascript">

$(document).ready(function(){

$("#frm_post").validate({           // Proses validasi

submitHandler: function(form) {

$.post('proses.php'

, $("#frm_post").serialize()

, function(data) {     

var data = $.parseJSON(data);

if(data.valid == 'true'){

$("#message").html("<div class=\"sukses\">"+data.message+"</div>");

}else{

$("#message").html("<div class=\"salah\">"+data.message+"</div>");

}

});

 

return false;

}

});

});

</script>

 

 

2. Pada form ada beberapa penambahan class

 

<form action="" method="post" name="frm_post" id="frm_post">

<table width="500" border="0" cellspacing="1" cellpadding="1">

<tr>

<td width="70">Nama *</td>

<td width="10">:</td>

<td width="300"><input type="text" name="nama" id="nama" value="{nama}"class="required" /></td>

</tr>

<tr>

<td width="70">Email *</td>

<td width="10">:</td>

<td width="300"><input type="text" name="email" id="email" value="{email}"class="email, required" /></td>

</tr>

 <tr>

<td width="70" valign="top">Pesan *</td>

<td width="10" valign="top">:</td>

<td width="300"><textarea name="pesan" id="pesan" rows="5" cols="40"class="required">{pesan}</textarea></td>

</tr>

<tr>

<td colspan="3"><input type="submit" name="submit" id="submit" value="Submit"  /> <input type="reset" name="reset" id="reset" value="Batal"  /></td>

</tr>

</table>

</form>

 

Required menandakan Textbox tersebut tidak boleh kosong, Email untuk memvalidasi email yang diinputkan.

3. Ubah index.php menjadi

 

error_reporting(E_ALL ^ E_NOTICE);

require_once( 'xtemplate.class.php' );

$tpl = new XTemplate('main.html', 'theme', null, 'main', true); // akses template yang pertama kali

 

$tpl->parse('main',600);

$tpl->out('main');

 

4. Buat file untuk proses (proses.php)

 

<?php

$referer_uri = "http://coba.lokal.com/xtpl/coba/form/";

 

if($_SERVER['HTTP_REFERER'] == $referer_uri){

$nama  = $_POST['nama'];

$email = $_POST['email'];

$pesan = $_POST['pesan'];

if(!empty($nama) && strlen($nama) >= 4){

if(!empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL)){

if(!empty($pesan)){

$msg = array("message" => "Terima kasih <strong>$nama</strong>, pesan anda berhasil diinputkan.", "valid" => "true");

}else{

$msg = array("message" => "Silahkan isi Pesan anda.", "valid" => "false");

}

}else{                

$msg = array("message" => "Silahkan isi Email yang benar.", "valid" => "false");

}

}else{

$msg = array("message" => "Silahkan isi Nama anda minimum 4 karakter.", "valid" => "false");

}

}else{

$msg = array("message" => "Silahkan Input pada halaman yang semestinya.", "valid" => "false");

}

 

echo json_encode($msg);

?>

DEMO | DOWNLOAD

Catatan :
- Kalian harus Terkoneksi internet untuk mencobanya, karena saya menggunakan jquery pada google untuk mencoba di local server silahkan download jquery terlebih dahulu.