Popular Post
Thursday 21 November 2013
Bekeja dengan Objek Spry, ya kali ini saya akan membahas mengenai pembuatan validasi Form. Lantas apa itu Spry dan kerjanya seperti apa ?
Jika anda perhatikan gambar di atas, di samping kanan Text Field ada pesan peringatan dimana tanggal dan email tidak sesuai yang diinginkan atau tidak valid. Pesan iru muncul secara otomatis ketika dalam penulisan di dalam Text Field tidak sesuai format yang sudah ditentukan.
Spry Framwork dirancang sedemikian rupa sehingga lebih simpel dan mudah saat digunakan oleh pengguna yang memiliki dasar pengetahuan HTML, CSS dan JavaScript. Spry Framwork sebenarnya adalah suatu library JavaScript yang memberikan kemempuan tinggi kepada Web Designer untuk meningkatkan kemampuan mendesain halaman Web. Denagan Spry, Anda dapat menggunakan HTML, CSS dan sedikit JavaScript untuk menggabungkan data XML ke dokumen HTML Anda. Adapun komponen form yang dapat Anda masukkan antara lain: Text Field, Textarea, Checkbox dan Button.
Pada kesempatan kali ini saya akan membahas membuat validasi pada Text Field, untuk melihat demo bisa klik
Berikut langkah-langkahnya:
- Buat file dan simpan dengan nama Validasi_Text.html. File ini sebagai index halaman utama.
- Copy Paste kode berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coba1</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/page.jpeg">
<form action="validasi_text.html" method="post">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<caption>
Contoh Menggunakan Spry Validation Text
<br />
<br />
</caption>
<tr>
<td width="150">Tanggal</td>
<td width="350"><span id="sprytextfield1">
<input type="text" name="text1" id="text1" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Tidak Sesuai Validasi.</span></span></td>
</tr>
<tr>
<td>Alamat E-Mail</td>
<td><span id="sprytextfield2">
<input type="text" name="text2" id="text2" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Email Tidak Valid.</span></span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {format:"dd/mm/yyyy", validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email");
</script>
</form>
</body>
</html>
Jasa Pembuatan Website Murah, dengan tampilan elegan, ArianCyber
Sekian pembahasan atau postingan saya mengenai Membuat Validasi Text Field . Apabilla ada kesalahan dalam pembahasan atau postingan saya mohon untuk dibenarkan karena saya masih dalam tahap belajar bukan Expert. Apabila ada Saran atau kritik silakan anda tulis di kotak komentar yang sudah di sediakan atau bisa kontak langsung ke saya. Semoga bermanfaat.
Apabila ada dari anda ingin memposting halaman ini harap cantumkan sumbernya dan dengan bahasa anda sendiri, jadilah blogger yang baik dan mempunyai Etika dalam dunia maya.
Apabila ada dari anda ingin memposting halaman ini harap cantumkan sumbernya dan dengan bahasa anda sendiri, jadilah blogger yang baik dan mempunyai Etika dalam dunia maya.
//.D
Subscribe to:
Post Comments
(Atom)
Colleger
This Yours
0 comments:
Post a Comment