Is Good Stuff » spry ajax http://www.isgoodstuff.com For all the good things! Mon, 26 Jul 2010 01:38:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Let’s Spry some AJAX! http://www.isgoodstuff.com/2008/07/14/lets-spry-some-ajax/ http://www.isgoodstuff.com/2008/07/14/lets-spry-some-ajax/#comments Mon, 14 Jul 2008 13:53:07 +0000 Mr.GoodStuff http://www.isgoodstuff.com/2008/07/14/lets-spry-some-ajax/ spry_title

What’s Spry? Spry is one of the “silent” AJAX framework that used to resides behinds the application of dreamweaver CS3. It is used by designers to develop AJAX applications using Dreamweaver.

This baby is quite a comprehensive and easiest to use high-level framework I’ve seen so far. You can actually use this open source framework like others because Adobe actually license it free.

However, the only problem is that; they aren’t much any good or simple examples for beginners (those that do not have Dreamweaver) to start with.

Adobe examples are some what mixed up hardcore example. Sometimes, is just good to start with simple samples first before going to hardcore samples.

Today’s post is about simple form validation samples. Now some of you may say, why yet another AJAX validation. Wait till you see what this framework has to offer.

 

Like all AJAX framework, Adobe Spry framework open source and is a free to use for all purposes including commercial. To download Spry AJAX framework (1.6.1 latest as to date of the post), you can head to Spry homepage.

If you have Aptana better still, just start web project, and pick Spry Ajax framework and the project will insert the framework into the project.

To begin with this tutorial download the materials here Download. (included portion of the framework js). Notice there’s four textfields inside this form. SpryValidationTextField.js and SpryValidationTextField.css is obtainable inside the widget folder inside the library, you need to attach it to your file to use it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Simple Form Validator</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="SpryValidationTextField.css" rel="stylesheet" type="text/css" />
        <script src="SpryValidationTextField.js" type="text/javascript">
        </script>
    </head>
    <body>
        <form id="form1" name="form1" method="post" action="">
            <table border="0" padding="5">
                <tr>
                    <td align="right">Name : </td>
                    <td><span id="sprytextfield1"><input type="text" name="textName" id="textName" /> <span class="textfieldRequiredMsg">A value is required.</span></span></td>
                </tr>
                 <tr>
                    <td align="right">Age : </td>
                    <td><span id="sprytextfield2"><input type="text" name="textAge" id="textAge" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
                </tr>
                <tr>
                    <td align="right">Email : </td>
                    <td><span id="sprytextfield3"><input type="text" name="textEmail" id="textEmail" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
                </tr>
                 <tr>
                    <td align="right">Phone : </td>
                    <td><span id="sprytextfield4"><input type="text" name="textPhone" id="textPhone" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
                </tr>
            </table>
            <script type="text/javascript">
                <!--
                var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", 'none', {validateOn: ['change']});
                var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "integer", {validateOn:["change"]});
                var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "email", {validateOn:["blur"]});
                var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "phone_number", {validateOn:["blur"], useCharacterMasking:true});
                //-->
            </script>
        </form>
    </body>
</html>

 

Take Note:

Each validation only checks a textfield if it’s wrapped so called “validation” span. To do this, simply wrap span tag with an id. After that, you will most like to insert a “error response” span right after the input textbox. See code below :-

15

<span id="sprytextfield2"><input type="text" name="textAge" id="textAge" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span>

You will need to script the validation trigger script like below. Make sure the same validation span’s id is used. Notice in code below you can validate some of this textboxes and Spry also support masking like special character that appears with phone number to make them look neater.

The second parameter is to check specific data type or format.

  • None checks for mandatory field,
  • integer checks for integer data type,
  • email checks for valid email
  • and phone_number is to check standard phone number format.
30
31
32
33
34
35
36
37

<script type="text/javascript">
                <!--
                var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", 'none', {validateOn: ['change']});
                var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "integer", {validateOn:["change"]});
                var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "email", {validateOn:["blur"]});
                var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "phone_number", {validateOn:["blur"], useCharacterMasking:true});
                //-->
</script>

Do take a look at more complex example as you go along. Happy coding! :)

]]> http://www.isgoodstuff.com/2008/07/14/lets-spry-some-ajax/feed/ 0