demos: dialog modal form

diff --git a/demos/dialog/modal-form2.html b/demos/dialog/modal-form2.html
index 509150858118c6f2e4d65297e01dd46c3bfebf17..f869cc891b0d20ec88c2221304a4a2922003ddc0 100644 (file)
--- a/demos/dialog/modal-form2.html
+++ b/demos/dialog/modal-form2.html
@@ -8,6 +8,8 @@
        <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
        <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
        <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+       <script type="text/javascript" src="../../ui/effects.core.js"></script>
+       <script type="text/javascript" src="../../ui/effects.highlight.js"></script>
        <script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
        <link type="text/css" href="../demos.css" rel="stylesheet" />
        <style type="text/css">
@@ -17,10 +19,39 @@
        </style>
        <script type="text/javascript">
        $(function() {
-               var name = $('#name'),
-                       email = $('#email'),
-                       password = $('#password'),
-                       allFields = $([]).add(name).add(email).add(password);
+               var name = $("#name"),
+                       email = $("#email"),
+                       password = $("#password"),
+                       allFields = $([]).add(name).add(email).add(password),
+                       tips = $("#validateTips");
+
+               function updateTips(t) {
+                       tips.text(t).effect("highlight",{},1500);
+               }
+
+               function checkLength(o,n,min,max) {
+
+                       if ( o.val().length > max || o.val().length < min ) {
+                               o.addClass('ui-state-error');
+                               updateTips("Length of " + n + " must be between "+min+" and "+max+".");
+                               return false;
+                       } else {
+                               return true;
+                       }
+
+               }
+
+               function checkRegexp(o,regexp,n) {
+
+                       if ( !( regexp.test( o.val() ) ) ) {
+                               o.addClass('ui-state-error');
+                               updateTips(n);
+                               return false;
+                       } else {
+                               return true;
+                       }
+
+               }
                
                $("#dialog").dialog({
                        autoOpen: false,
@@ -28,16 +59,18 @@
                        height: 300,
                        modal: true,
                        buttons: {
-                               'Create user account': function() {
+                               'Create an account': function() {
                                        var bValid = true;
-                                       allFields
-                                               .removeClass('ui-state-error')
-                                               .each(function() {
-                                                       if (!$(this).val().length) {
-                                                               $(this).addClass('ui-state-error');
-                                                               bValid = false;
-                                                       }
-                                               });
+                                       allFields.removeClass('ui-state-error');
+
+                                       bValid = bValid && checkLength(name,"username",3,16);
+                                       bValid = bValid && checkLength(email,"email",6,80);
+                                       bValid = bValid && checkLength(password,"password",5,16);
+
+                                       bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
+                                       // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+                                       bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com");
+                                       bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
                                        
                                        if (bValid) {
                                                $('#users tbody').append('<tr>' +
@@ -68,7 +101,7 @@
 <div class="demo">
 
 <div id="dialog" title="Create new user">
-       <p>All form fields are required.</p>
+       <p id="validateTips">All form fields are required.</p>
 
        <form>
        <fieldset>