rss feed
validation is very important to avoid data entry errors. in this article I will give an example using prototype.js form validation.
1. The first call validation.js files, prototype.js, val.css in your html header
2. in the form, call the validation class
3. Here’s the list of classes available to add to your field elements:
* required (not blank)
* validate-number (a valid number)
* validate-digits (digits only)
* validate-alpha (letters only)
* validate-alphanum (only letters and numbers)
* validate-date (a valid date value)
* validate-email (a valid email address)
* validate-url (a valid URL)
* validate-date-au (a date formatted as; dd/mm/yyyy)
* validate-currency-dollar (a valid dollar value)
* validate-selection (first option e.g. ‘Select one…’ is not selected option)
* validate-one-required (At least one textbox/radio element must be selected in a group – see below*)
ajax updater adalah fungsi dari prototype.js yang banyak digunakan untuk menampilkan hasil eksekusi algoritma yang di tampilkan dalam sebuah elemen. berikut adalah contoh penggunaan Ajax.Updater pada prototype.js.
Pertama download file prototype.js kemudian simpan pada folder tertentu, misal folder latihan. kemudian buat file latihan.html dalam satu flder latihan tadi. buka file latihan.html dan masukkan script berikut :
<html>
<head>
<title>Prototype examples</title>
<script type="text/javascript"
src="prototype.js">
</script>
<script>
function insertTime()
{
new Ajax.Updater('update', 'update.html', {
method: 'get',
insertion: Insertion.Bottom
});
}
</script>
</head>
<body>
<div id="update"></div>
<br />
<br />
<input type="button" value="Update" onclick="insertTime();"/>
</body>
</html>
simpan script diatas. selanjutnya buat file update.html dalam satu folder yang sama. masukkan text, gambar atau script pada file ini. pada contoh ini saya masukkan text yang bertuliskan “INI ADALAH UPDATEKU “SELAMAT MENCOBA”<BR>”
kemudian jalankan file latihan.php dengan browser. klik tombol update dan lihat apa yang terjadi?. saat kamu mengeklik tombol update script akan mengeksekusi function insertTime(), karena dalam fungsi ini terdapat pemanggilan fungsi Ajax.Updater maka isi dari file update.html ditampilkan dalam elemen <div id=”update”></div>
Selamat mencoba……..DOWNLOAD SCRIPT
More Options ...
Categories
Tag Cloud
Blog RSS
Comments RSS
Void « Default
Life 
Earth 
Wind 
Water 
Fire Light 
Last 50 Posts
Back