Powered By Blogger

Minggu, 18 April 2010

Javascript Validasi 2 Tanggal

Langsung aja deh udah malem, ngantuk ah, mana besok mesti kerja lagi.

Misal kita punya tanggal awal dan tanggal akhir kayak gambar dibawah ini, nah tapi tanggal yang diinput itu kan mestinya tanggal mulai lebih kecil dari tanggal akhir.

Cara ngevalidasi paling gampang adalah pake javascript. Yah, gampang lah yang kayak gini aja mah.... tinggal compare aja tanggal mulai sama tanggal akhir tadi.
Ternyata kalo kita langsung compare inputan tadi kyk gini :
if(tgl_akhir > tgl_awal) {
alert('Tanggal tidak valid');
}else {
alert('Tanggal valid');
}
pas fungsi tadi dijalankan akan selalu masuk ke alert('Tanggal valid') walaupun tanggal nya gak bener, ini dikarenakan si javascript cuman nge-compare string doank.

Langkahnya gimana donk.....
Kita rubah dulu inputan kedua tanggal tadi menjadi bentuk tipe date();
dan yang terpenting format inputan tanggal juga harus dirubah menjadi bentuk yyyy-mm-dd.
Caranya kita pake fungsi split dengan parameter awal pemisahnya kemudian dibagi menjadi berapa bagian kedalam bentuk array;

contoh :
var str = '14-04-2010';
var awal = str.split('/',3);
hasil variable awal akan kyk begini : 14,04,2010

var str2 = '13-04-2010';
var selesai = str2.split('/',3);
hasil variable selesai akan kyk begini : 13,04,2010

udah gitu sambung lagi bagian2 yang udah di split tadi ke format yyyy-mm-dd,
var mulai = awal[2] + '-' +awal[1] + '-' + awal[0];
var akhir = selesai[2] + '-' +selesai[1] + '-' + selesai[0];

udah gitu rubah ke bentuk date() sekaligus bandingin,
if(new Date(mulai) > new Date(akhir)) {
alert('Tanggal Mulai harus lebih kecil dari tanggal akhir.');
}else {
alert('Tanggal valid.');
}













Hasilnya bisa di download disini :
http://www.ziddu.com/download/9501792/SCW.rar.html

Calendar yang dipake berasal dari link ini :
http://www.garrett.nildram.co.uk/calendar/scw.htm

Sabtu, 17 April 2010

Javascript Input Numeric

Kadang kita pengen buat validasi di web biar input cuman bisa angka aja. Nah di web validasi kyk gitu biasanya disimpan di javascript (CMIIW).
Nah, karena lumayan sering kepake mendingan dicatet aja ah, biar ga lupa.

Sebenernya bisa aja pake javascript framework kyk prototipe, jquery, dll. Tapi biar tahu dasar-dasar javascript, kode yang dibuat ini ngga pake javascript framework.
Cara yang digunakan adalah dengan mendeteksi nomor tombol keyboard yang ditekan (istilah kerennya "keystroke event") dengan menggunakan salah satu fungsi berikut ini keyCode, charCode atau which.
Perbedaan dari ketiga fungsi itu :
1. keyCode :
Browser compability (Semua browser, kecuali saat event onkeypress di Mozilla)
2. charCode :
Browser Compability : - Tidak disupport oleh Opera dan IE
- onkeydown dan onkeyup tidak disupport oleh google chrome, Mozilla, Safari
3. which :
Browser Compability : - Tidak disupport oleh IE

yang terjadi pada saat event ini :
1. onkeydown
event occurs when a keyboard key is pressed.
2. onkeypress
event occurs when a keyboard key is pressed or held down.
Gak semua tombol bisa ke detect, kyk tombol ini (ALT, SHIFT, CTRL, CAPS LOCK)
3. onkeyup
event occurs when a keyboard key is released.

Contoh fungsi javascriptnya kyk gini :
Kalo mau dipake pas onkeypress atau onkeydown :

function isNumeric(e){
var unicode=e.keyCode? e.keyCode : e.charCode;
if(unicode != 8 && unicode != 37 && unicode != 39 && unicode != 36 && unicode != 35) {
if(unicode <> 58)
return false;
}
}

Kalo mau dipake pas onkeyup agak ribet :D :
function valid(f) {
var re = /^[0-9]*$/;
if (!re.test(f.value)) {
//alert("Only numbers allowed!");
f.value = f.value.replace(/[^0-9]/g,"");
}
}

penjelasannya :
var re = /^[0-9]*$/;
Adalah pattern (pola) yang digunakan dalam regular expression.

Karakter ^ digunakan mencocokan awal input.
Karakter [0-9] digunakan untuk mencocokan angka.
Karakter * digunakan untuk mencocokan nol atau lebih karakter.
Karakter $ digunakan untuk mencocokan akhir inputan.

!re.test(f.value)
Adalah fungsi yang digunakan untuk mengetes apakah string yang diberikan cocok dengan regular expression, dan mengembalikan nilai true jika cocok dan false jika tidak.
/[^0-9]/g
Karakter [^0-9] berarti bukan karakter 0-9.
g dipakai untuk mengecek secara global atau karakter seterusnya.

f.value.replace(/[^0-9]/g,"");
Adalah fungsi yang digunakan untuk menghapus nilai(gampangnya) jika tidak sesuai dengan
pola.
Selesai juga nih, tulisan pertama.
Oh iya, contoh nya bisa di download disini :

Kalo mau coba event2 nya masuk aja ke alamat ini :