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
04 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
06 | <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script> |
07 | <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> |
10 | <body background="images/page.jpeg"> |
11 | <form action="validasi_text.html" method="post"> |
12 | <table width="500" border="0" cellspacing="0" cellpadding="0"> |
14 | Contoh Menggunakan Spry Validation Text |
20 | <td width="150">Tanggal</td> |
21 | <td width="350"><span id="sprytextfield1"> |
22 | <input type="text" name="text1" id="text1" /> |
23 | <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Tidak Sesuai Validasi.</span></span></td> |
26 | <td>Alamat E-Mail</td> |
27 | <td><span id="sprytextfield2"> |
28 | <input type="text" name="text2" id="text2" /> |
29 | <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Email Tidak Valid.</span></span></td> |
33 | <td><input type="submit" name="button" id="button" value="Submit" /></td> |
36 | <script type="text/javascript"> |
37 | var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {format:"dd/mm/yyyy", validateOn:["blur"]}); |
38 | var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email"); |
- Untuk kode lengkapnya silakan download, klik
Tidak ada komentar:
Posting Komentar