• jQuery
• jQuery Form
• jQuery Validation Engine

Kali ni, kod overload. Kalau ada rasa loya-loya sikit bila tengok kod banyak sangat, sila undur ke belakang perlahan-lahan dan cari beg plastik sebagai persiapan untuk muntah, pastu teruskan membaca.

Untuk makluman semua, kod dibawah digunakan bersama dengan Validation Engine 1.6.3. Untuk version 2.0 ni, tak berapa pasti, tapi mengikut firasat aku, takde beza kot (nanti la aku test).

So kalau nak tengok demo untuk validation engine tu, gi la ke demo page dia.

Validation Engine
Plugin ni ada client-side validation, tapi aku ni, malas sikit nak buat client side validation ni kerana server-side validation kena buat jugak. Oleh kerana aku lebih suka meluangkan masa di reddit daripada buat client-side validation, aku buat server-side je lah.

Kalau nak buat client-side validation, kat site dia ada cerita, dalam docs tu dan bila invalid data, dia keluar pop-up macam ni,

Amacam? Menarik? Hehehe.

Oh, benda ni bukan limit pada codeigniter je, kalau php biasa pun leh guna. Sebab aku guna codeigniter, aku kasi spotlight la kat CodeIgniter. Hehehe.

Ok, first sekali kena set jquery form plugin.

var options = {
  beforeSubmit:  loading,  // pre-submit callback
  dataType: 'json',
  success: cleanup  // post-submit callback
};
$('#nama_form').ajaxForm(options);

Form dia, aku kasi contoh, gini la rupa dia

<?php echo form_open('register/create', array('id' => 'registration_form')); ?>
	<h3>Account Info</h3>
	<div>
		<label>Email Address<span class="required">*</span></label>
		<input type="text" class="email-address text" id="username" name="username" value="" />
		<span class="field_info">Type in your email address, an email will be sent afterwards</span>
	</div>
</form>

Ha, simple je. Pastukan, kita taruk ni pulak

function cleanup(data)
{
	$('#submitbtn').removeAttr('disabled');
	if(data.status == 'success')
	{
		window.location = data.url
	}
	if(data.status == 'error')
	{
		$('#submitbtn').removeAttr('disabled');
		$('#submitbtn').val('Submit');
		$('#submitbtn').parent().prepend('<span id="status_msg">There was a slight problem with your submission (see above).</span>')

		$('#status_msg').fadeOut(3000, function(){
			$(this).remove();
		});

		$.each(data.error, function(index, value){
			$.validationEngine.buildPrompt(value[0],value[1],value[2])
			$('.'+value[0].substr(1)+'formError').click(function(){
				$.validationEngine.closePrompt(value[0])
			})
		})
	}
}

Ape fungsi function diatas? Untuk paparkan popup yang memaparkan error pada validation. Haa.. function cleanup ni dipanggil bila form tu dah disubmit secara ajax pada nilai “action” form tersebut. Action ni url dimana form tu hantar data tu le.

Garu kepala sikit, apa benda kandungan fungsi function cleanup ni!? Argh! Kalo nak paham, kena pi tengok kod server-side. Jom…

function create()
{
	$this->load->library('form_validation');
	$this->form_validation->set_rules('tnc', 'Terms and Conditions', 'trim|required|xss_clean');
	$this->form_validation->set_rules('username', 'username', 'trim|required|xss_clean|valid_email|callback__check_username');
	$this->form_validation->set_rules('fullname', 'fullname', 'trim|required|xss_clean');
	$this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|min_length['.$this->config->item('password_min_length').']|max_length['.$this->config->item('password_max_length').']|alpha_dash');
	$this->form_validation->set_rules('verify_password', 'Confirm Password', 'trim|required|xss_clean|matches[password]');
	$this->form_validation->set_rules('captcha', 'Confirmation Code', 'trim|xss_clean|required|callback__check_captcha');

	if($this->form_validation->run() === FALSE)
	{
		$response['status'] = 'error';

		$errors = $this->form_validation->_error_array;
		$field_errors = array();
		$error_details = array();
		foreach($errors as $key => $data)
		{
			$error_details[] = "#$key";
			$error_details[] = $data;
			$error_details[] = "error";

			$field_errors[] = $error_details;
			$error_details = array();
		}
		$response['error'] = $field_errors;
		echo json_encode($response);
	}
	else
	{

		$response['status'] = 'success';
		$response['url'] = site_url('something/completed');
		echo json_encode($response);
	}
}

Ha.. yang lain tu kosmetik je. Yang penting bila form tu tak dapat validate, dia masuk dalam line 13. Apa dia buat kat sini, dia bagi create key dan value je. Key nya ialah id html element, value nya.. error tu la. Tak dapat bayangkan, jom kita tengok apa kata si serangga api (firebug).

Image tu kecik sikit, kena klik untuk tengok saiz penuh. Nampak? Dia iterate semua element dalam key “error”. Total ada 5 element. Setiap satu mewakili input field pada form. Click pada tab JSON kat firebug tu dia papar gini,

Bila nilai-nilai JSON ni dihantar kembali, jquery form tu dia laksanakan function cleanup. Cleanup to melalui semua element error dan generate popup untuk setiap satu element. Ha.. tapi aku lupa nak bagitau sesuatu, sebelum submit dia ada panggil function “loading”. Takde ape sangat pun, cuma nak reset submit button dan buang semua error popup.

function loading()
{
	$('#status_msg').remove();
	$('#submitbtn').attr('disabled', 'true');
	$('#submitbtn').val('Processing..')
	$.validationEngine.closePrompt('.formError');
}

Ok settle. Setakat ni, kalau dah reti pakai jquery validation engine, pastu nak implement benda ni, takde masalah (bagi aku takde masalah, kalau ada mai la habaq sini). Nak tunjuk step-by-step sampai jadi, payah sikit la. So godek-godek la kod diatas bagi jadi.

Sebelum aku terlupa, kod-kod ni untuk tutup error popup tu kalau dia menganggu. Ye la, dah banyak sangat popup, mesti la dia lindung benda lain satgi.

$('input').click(function(){
	$.validationEngine.closePrompt($(this))
})
$('input').focus(function(){
	$.validationEngine.closePrompt($(this))
})

Jadi, hasilnya lebih kurang macam ni,

Moga diberi masa untuk post lagi pada masa akan datang. Setakat tu je sembang untuk kali ni, masa untuk programming pulak!

PHP Meetup 2011 akan diadakan oleh ahli-ahli php.net.my, bertemakan framework “shootout”. Macam koboi la pulak. Tapi kalau aku jadi presenter, nak kena shootout dengan framework lain, memang aku surrender dulu la, bendera putihku akan berkibaran meluncur angkasa.

Kenapa aku mengaku kalah?

Kalau lawan CodeIgniter..
Dari segi features, Zend menang. Dari segi kepantasan menghasilkan suatu web app, aku rasa CakePHP menang dari segi OO, Symfony la kot.. apa lagi.. entah lah. Apa yang CodeIgniter ada? Very small footprint (tapak kaki kecil lagi comel?), low barrier to entry, elegant toolset dan juga dokumentasi yang komprehensif! Sukar untuk diukur dan dipertandingkan! Takkan nak tayang dokumentasi atas pentas!

Lihatlah kalian semua, betapa moleknya kod ni, dokumentasi ini, bacalah.. aku bagi masa 10 minit. Amacam? Komprehensif?

Mampuih aku kena tendang keluar pentas. Akan tetapi, untuk meetup kali ni aku akan mengaku kalah, sebab tak bersedia (bak kata orang, tactical retreat). Tapi meetup seterusnya, aku akan bersedia (mungkin la) untuk memperlihatkan.. API MEMBARA YANG BAKAL MENYINARI DAN MEMBAKAR KOD! KOOOODDD IGNIIIITEEEE!!! TEBABOOO (sambil menyalakan lighter didepan skrin).

*ahem* Terlebih sound effect pulak.

Oleh kerana tarikh tak confirm lagi, aku pun takleh nak kata gerenti datang. So kita tunggu dan lihat, aku update kalau dah ada tarikh confirm, kita tengok macam mana ya.

Saiznya yang kecil (3.27MB) juga membuatkannya senang untuk digunakan di mana sahaja (download je bila nak guna).