[vhffs-dev] [1899] Added JS validation on subscribe screen

[ Thread Index | Date Index | More vhffs.org/vhffs-dev Archives ]

To: vhffs-dev@xxxxxxxxx
Subject: [vhffs-dev] [1899] Added JS validation on subscribe screen
From: subversion@xxxxxxxxxxxxx
Date: Thu, 28 Jul 2011 23:38:56 +0200

Revision: 1899
Author:   beuss
Date:     2011-07-28 23:38:55 +0200 (Thu, 28 Jul 2011)
Log Message:
-----------
Added JS validation on subscribe screen

Modified Paths:
--------------
    trunk/vhffs-panel/Makefile.am
    trunk/vhffs-panel/templates/anonymous/subscribe.tt
    trunk/vhffs-panel/templates/layouts/anonymous.tt
    trunk/vhffs-themes/Makefile.am
    trunk/vhffs-themes/light-grey/main.css

Added Paths:
-----------
    trunk/vhffs-panel/js/vhffs/anonymous/
    trunk/vhffs-panel/js/vhffs/anonymous/subscribe.js
    trunk/vhffs-panel/js/vhffs/nls/
    trunk/vhffs-panel/js/vhffs/nls/fr/
    trunk/vhffs-panel/js/vhffs/nls/fr/prompt.js
    trunk/vhffs-panel/js/vhffs/nls/prompt.js
    trunk/vhffs-themes/light-grey/img/info.png

Modified: trunk/vhffs-panel/Makefile.am
===================================================================
--- trunk/vhffs-panel/Makefile.am	2011-07-27 20:02:34 UTC (rev 1898)
+++ trunk/vhffs-panel/Makefile.am	2011-07-28 21:38:55 UTC (rev 1899)
@@ -778,8 +778,11 @@
 	js/prototype.js \
 	js/commons.js \
 	js/public.js \
+	js/vhffs/nls/fr/prompt.js \
+	js/vhffs/nls/prompt.js \
 	js/vhffs/Menu.js \
 	js/vhffs/Common.js \
+	js/vhffs/anonymous/subscribe.js \
 	js/tooltip.js
 
 if INSTALL_PANEL

Added: trunk/vhffs-panel/js/vhffs/anonymous/subscribe.js
===================================================================
--- trunk/vhffs-panel/js/vhffs/anonymous/subscribe.js	                        (rev 0)
+++ trunk/vhffs-panel/js/vhffs/anonymous/subscribe.js	2011-07-28 21:38:55 UTC (rev 1899)
@@ -0,0 +1,46 @@
+dojo.addOnLoad(function() {
+    dojo.require("dojo.parser");
+    dojo.require("dijit.form.Form");
+    dojo.require("dijit.form.ValidationTextBox");
+
+    dojo.requireLocalization("vhffs", "prompt");
+    var prompts = dojo.i18n.getLocalization("vhffs", "prompt");
+    var infoImg = '<img src="/themes/light-grey/img/info.png" alt="info"/> ';
+
+    dojo.parser.instantiate( dojo.query("input.validation-identifier"), {
+        dojoType: "dijit.form.ValidationTextBox",
+        required: true,
+        regExp: "^[a-z0-9]{3,12}$",
+        promptMessage: infoImg + prompts.identifier
+    });
+
+    dojo.parser.instantiate( dojo.query("input.validation-email"), {
+        dojoType: "dijit.form.ValidationTextBox",
+        required: true,
+        regExp: "^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,10})$",
+        promptMessage: infoImg + prompts.email
+    });
+
+    dojo.parser.instantiate( dojo.query("input.validation-string"), {
+        dojoType: "dijit.form.ValidationTextBox",
+        required: true,
+        regExp: "^[^<>\"]+$",
+        promptMessage: infoImg + prompts.string
+    });
+
+    dojo.parser.instantiate( dojo.query("input.validation-zipcode"), {
+        dojoType: "dijit.form.ValidationTextBox",
+        required: true,
+        regExp: "^[\\w\\d\\s\\-]+$",
+        promptMessage: infoImg + prompts.zipcode
+    });
+
+    dojo.parser.instantiate( [ dojo.byId("subscribe-form") ], {
+        dojoType: "dijit.form.Form",
+        onSubmit: function(e) {
+            if(this.validate() == false) {
+                dojo.stopEvent(e);
+            }
+        }
+    });
+});

Added: trunk/vhffs-panel/js/vhffs/nls/fr/prompt.js
===================================================================
--- trunk/vhffs-panel/js/vhffs/nls/fr/prompt.js	                        (rev 0)
+++ trunk/vhffs-panel/js/vhffs/nls/fr/prompt.js	2011-07-28 21:38:55 UTC (rev 1899)
@@ -0,0 +1,6 @@
+{
+    identifier: "3 à 12 caractères alphanumériques, minuscules, le premier ne peut être un chiffre",
+    email: "Email valide (utilisateur@xxxxxxxxxxx)",
+    string: "Chaîne quelconque (sauf &lt;, &gt; et \")",
+    zipcode: "Code postal"
+}

Added: trunk/vhffs-panel/js/vhffs/nls/prompt.js
===================================================================
--- trunk/vhffs-panel/js/vhffs/nls/prompt.js	                        (rev 0)
+++ trunk/vhffs-panel/js/vhffs/nls/prompt.js	2011-07-28 21:38:55 UTC (rev 1899)
@@ -0,0 +1,6 @@
+{
+    identifier: "3 to 12 alphanumeric symbols, lower case, cannot start with a number",
+    email: "Valid email (user@xxxxxxxxxx)",
+    string: "Arbitrary string (excepted &lt;, &gt; and \")",
+    zipcode: "Zip code"
+}

Modified: trunk/vhffs-panel/templates/anonymous/subscribe.tt
===================================================================
--- trunk/vhffs-panel/templates/anonymous/subscribe.tt	2011-07-27 20:02:34 UTC (rev 1898)
+++ trunk/vhffs-panel/templates/anonymous/subscribe.tt	2011-07-28 21:38:55 UTC (rev 1899)
@@ -1,59 +1,41 @@
-<div class="logo">
-</div>
 <div id="subscribe">		
 		<div id="content">
 			<h1>[% 'Subscription' | i18n | html %]</h1>
                 <p class="info">[% 'Please fill in all fields, you\'ll be sent a mail containing your password' | i18n | html %]</p>
                 <div class="subscribe">
-                <form class="table-like" method="post" action="subscribe.pl" accept-charset="utf-8">
+                <form id="subscribe-form" class="table-like" method="post" action="subscribe.pl" accept-charset="utf-8">
                 [% INCLUDE 'misc/errors.tt' %]
 				<p>
-					<label for="USERNAME">
-						[% 'Username:' | i18n | html %]
-					</label>
-					<span><input type="text" name="USERNAME" id="USERNAME" maxlength="12" value="[% username | html %]" onchange="javascript:check(this.id, validIdentifier, 12);" onkeyup="javascript:check(this.id, validIdentifier, 12);"/>&nbsp;</span>&nbsp;<img src="/themes/[% theme %]/images/tip.png" alt="tip" id="username_tip_trigger"/>
+					<label for="subscribe-username">[% 'Username:' | i18n | html %]</label>
+					<input type="text" class="validation-identifier" name="USERNAME" id="subscribe-username" maxlength="12" value="[% username | html %]"/>
                 </p>
 				<p>
-					<label for="MAIL">
-                        [% 'Email:' | i18n | html %]
-					</label>
-					<span><input type="text" name="MAIL" id="MAIL" maxlength="200" value="[% mail | html %]" onkeyup="javascript:check(this.id, validEmail);"/>&nbsp;</span>&nbsp;<img src="/themes/[% theme %]/images/tip.png" alt="tip" id="email_tip_trigger"/>
+					<label for="subscribe-email">[% 'Email:' | i18n | html %]</label>
+					<input type="text" class="validation-email" name="MAIL" id="subscribe-email" maxlength="200" value="[% mail | html %]"/>
 				</p>
 				<p>
-					<label for="FIRSTNAME">
-						[% 'Firstname:' | i18n | html %]
-					</label>
-                    <span><input type="text" name="FIRSTNAME" id="FIRSTNAME" maxlength="256" value="[% firstname | html %]" onkeyup="javascript:check('FIRSTNAME', validString);" />&nbsp;</span>
+					<label for="subscribe-firstname">[% 'Firstname:' | i18n | html %]</label>
+                    <input type="text" class="validation-string" name="FIRSTNAME" id="subscribe-firstname" maxlength="256" value="[% firstname | html %]"/>
 				</p>
 				<p>
-					<label for="LASTNAME">
-                        [% 'Lastname: ' | i18n | html %]
-					</label>
-                    <span><input type="text" name="LASTNAME" id="LASTNAME" maxlength="256" value="[% lastname | html %]" onkeyup="javascript:check('LASTNAME', validString);"/>&nbsp;</span>
+					<label for="subscribe-lastname">[% 'Lastname: ' | i18n | html %]</label>
+                    <input type="text" class="validation-string" name="LASTNAME" id="subscribe-lastname" maxlength="256" value="[% lastname | html %]"/>
 				</p>
 				<p>
-					<label for="ADDRESS">
-                        [% 'Address:' | i18n | html %]
-					</label>
-                    <span><input type="text" name="ADDRESS" id="ADDRESS" maxlength="512" value="[% address | html %]" onkeyup="javascript:check('ADDRESS', validString);"/>&nbsp;</span>
+					<label for="subscribe-address">[% 'Address:' | i18n | html %]</label>
+                    <input type="text" class="validation-string" name="ADDRESS" id="subscribe-address" maxlength="512" value="[% address | html %]"/>
 				</p>
 				<p>
-					<label for="CITY">
-                        [% 'City:' | i18n | html %]
-					</label>
-                    <span><input type="text" name="CITY" id="CITY" maxlength="64" value="[% city | html %]" onkeyup="javascript:check('CITY', validString);"/>&nbsp;</span>
+					<label for="subscribe-city">[% 'City:' | i18n | html %]</label>
+                    <input type="text" class="validation-string" name="CITY" id="subscribe-city" maxlength="64" value="[% city | html %]"/>
 				</p>
 				<p>
-					<label for="COUNTRY">
-                        [% 'Country:' | i18n | html %]
-					</label>
-                    <span><input type="text" name="COUNTRY" id="COUNTRY" maxlength="32" value="[% country | html %]" onkeyup="javascript:check('COUNTRY', validString);"/>&nbsp;</span>
+					<label for="subscribe-country">[% 'Country:' | i18n | html %]</label>
+                    <input type="text" class="validation-string" name="COUNTRY" id="subscribe-country" maxlength="32" value="[% country | html %]"/>
 				</p>
 				<p>
-					<label for="ZIPCODE">
-                        [% 'Zipcode' | i18n | html %]
-					</label>
-					<span><input type="text" name="ZIPCODE" id="ZIPCODE" maxlength="16" value="[% zipcode | html %]" onkeyup="javascript:check(this.id, validZip);" onchange="javascript:check(this.id, validZip);"/>&nbsp;</span>
+					<label for="subscribe-zipcode">[% 'Zipcode' | i18n | html %]</label>
+					<input type="text" class="validation-zipcode" name="ZIPCODE" id="subscribe-zipcode" maxlength="16" value="[% zipcode | html %]"/>
 				</p>
 [% IF newsletter %]
 				<p>
@@ -64,9 +46,7 @@
 				</p>
 [% END %]
 [% IF captcha_pubkey %]
-				<p>
-                    <label class="inline">[% 'Captcha:' | i18n | html %]</label>
-                </p>
+				<p style="float:left"><label>[% 'Captcha:' | i18n | html %]</label></p>
                 <script type="text/javascript">
                     var RecaptchaOptions = {
                         theme: 'white',
@@ -80,25 +60,12 @@
                     <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                 </noscript>
 [% END %]
-				<p class="button">
+				<p class="button" style="clear:both">
 					<input type="submit" value="[% 'Subscribe' | i18n | html %]" name="CREATE_SUBMIT"/>
 				</p>
 			</form>
 			</div>
 		    <p class="home"><a href="/auth.pl">[% 'Back to login' %]</a></p>
 		</div>
-        <div id="email_tooltip" class="tooltip">[% 'Your email address. It will be used to contact you when needed and as a destination address if you use our email forwarding service' | i18n | html %]</div>
-        <div id="username_tooltip" class="tooltip">[% 'Your username. It must contains only alphanumeric characters in lowercase, its length must be between 3 and 12 chars' | i18n | html %]</div>
-        <script type="text/javascript">
-            new Tooltip('username_tip_trigger', 'username_tooltip', { delta_x: 5, delta_y: 5 });
-            new Tooltip('email_tip_trigger', 'email_tooltip', { delta_x: 5, delta_y: 5 });
-            check('USERNAME', validIdentifier, 12);
-            check('MAIL', validEmail);
-            check('FIRSTNAME', validString);
-            check('LASTNAME', validString);
-            check('ADDRESS', validString);
-            check('CITY', validString);
-            check('COUNTRY', validString);
-            check('ZIPCODE', validZip);
-        </script>
+        <script type="text/javascript" charset="utf-8" src="/js/vhffs/anonymous/subscribe.js"></script>
 </div>

Modified: trunk/vhffs-panel/templates/layouts/anonymous.tt
===================================================================
--- trunk/vhffs-panel/templates/layouts/anonymous.tt	2011-07-27 20:02:34 UTC (rev 1898)
+++ trunk/vhffs-panel/templates/layouts/anonymous.tt	2011-07-28 21:38:55 UTC (rev 1899)
@@ -2,13 +2,12 @@
 <html xmlns="http://www.w3.org/1999/xhtml";>
 <head>
 	<title>[% title | html %]</title>
+	<link rel="stylesheet" type="text/css" href="/js/dijit/themes/tundra/tundra.css"/>
 	<link rel="stylesheet" type="text/css" href="/themes/[% theme %]/main.css"/>
 	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
-	<script language="javascript" type="text/javascript" charset="utf-8" src="/js/prototype.js"></script>
-	<script language="javascript" type="text/javascript" charset="utf-8" src="/js/commons.js"></script>
-	<script language="javascript" type="text/javascript" charset="utf-8" src="/js/tooltip.js"></script>
+    <script language="javascript" type="text/javascript" charset="utf-8" src="/js/dojo/dojo.js"></script>
 </head>
-<body>
+<body class="tundra">
 <div id="background-container">
   <div class="page-container-panel-anonymous">
     <div id="loading" style="display:none">

Modified: trunk/vhffs-themes/Makefile.am
===================================================================
--- trunk/vhffs-themes/Makefile.am	2011-07-27 20:02:34 UTC (rev 1898)
+++ trunk/vhffs-themes/Makefile.am	2011-07-28 21:38:55 UTC (rev 1899)
@@ -80,6 +80,7 @@
 	light-grey/img/new_tag.png \
 	light-grey/img/vhffs-big.png \
 	light-grey/img/background_layout_1.gif \
+	light-grey/img/info.png \
 	light-grey/img/loading.gif \
 	light-grey/img/vhffs.png \
 	light-grey/img/bullet.png \

Added: trunk/vhffs-themes/light-grey/img/info.png
===================================================================
--- trunk/vhffs-themes/light-grey/img/info.png	                        (rev 0)
+++ trunk/vhffs-themes/light-grey/img/info.png	2011-07-28 21:38:55 UTC (rev 1899)
@@ -0,0 +1,10 @@
+\x89PNG
+
+
+IHDR\xF3\xFFasBIT|d\x88	pHYs
+\xD7
+\xD7B(\x9BxtEXtSoftwarewww.inkscape.org\x9B\xEE<WIDAT8\x8D\x95SQHSQ\xFE\xCE\xD9\xC9\xC3ݝV\xF42\x99!.Z1I>Œ\xAC\x8C\x9EBz\xEA\xC9\xF0\xA5 1\x82XO\x96\xBD)>\xAC^\x82\xF9\x90`cD\x84\xA6s\xE8m\xADMҌZ\xCB\xDC\xDD\xF5ޝ\xED\xF4\xE4\xF0\xB6\xBD\xF8\xBD\x9D\x9F\xEF\xFF\xCE\xFF\xFC\x91Rb/!^\xC6\xD8M\xC5\xE9\xEA3M\xC3\x9C+	\xA3T\x8C	!\xA6\xA4\x94)W\x80B\xE7CBG\xFB\xAF6\xF9\xBA{X\xA7\xAF\x90֖\xA1\xC5\xC4\$lUduD\x98\xE6)e\xB5&@\xA1NW\xF3[\xB7\xA7#0<6\xAE\xB6\xB6\xB5\xA3\xBE\xCB\xE1\xF1\xFD;\xFA\xFAZf\xA9T\xDCJ)\xAB\xE7CnOG 49ck~\x9DEj5^{\xB7\xB6\xB5#49\xA3\xBA=\xC6\xF9PB\x88\xD7A\xE8\xE8\xF0ظJ(\xB5\xFD}\xFD
+K\xDE\xD9=\xA2\xC3c㪃\xD0QB\x88\xD7\xC1\xBB{\xE9ڍ๋\xF6n\xC1\xFE\x9C
+\xF4֭\xD2\xDCr[\x85\xDF\xE4K2\xA1S\xC5\xE9\xEA\xF3u\xF7\xB0\xFFI\xD9t\xCF\xDDÛȋ\x86~\xF8\xBA{\x98\xE2t\xF5Q\xD34\xFC\xBBn\xEFű\xCE \x84"\x9BN6\xE8\xF4u\xC14
+\xDD\xD8\xFB\xE5\I\xA4\xB5e[q[/!\xB7\xBE\x89_\x85?\xF8\x99/ \xB7\xBE\x89m\xBDd㤵ep\xAE$\x98Q*ƴ\xF8B\xEF\xD9W\x98K\xAB)\xE4[\xC30A(E2\x9D9|\x81\x93^0Ơ\xC5\x84Q*ƨbj.\xB6r\xD9\xE6Wj͍\x90/la~q\xB9ls\x91\xB0%\x84\x98\xA2R\xCATEVG\xA6'B;\x96U\xAE\x9172Dق\xB0v\xB0\xF1U\xAB\xD5-\xAB\x8C\xE9\x89\xD0NEVG\xA4\x94)\xDB)\xF7\x9F9}\xFE\xFAm\xC5*WN\xD0t\xC0\x81\xE8˧\xC6\xE7\xC4\xC7O\xBB\xA7\&Umyxy\xF0V\xD3Q\x8F\xD7A\xB9
+\xA8\x9A:~\xAC\xA5*\xB3\xE1疮\xFF}P\xA6\xBD\xD8o\x9C\xFF\x99-_\x99[1\xA4IEND\xAEB`\x82
\ No newline at end of file

Modified: trunk/vhffs-themes/light-grey/main.css
===================================================================
--- trunk/vhffs-themes/light-grey/main.css	2011-07-27 20:02:34 UTC (rev 1898)
+++ trunk/vhffs-themes/light-grey/main.css	2011-07-28 21:38:55 UTC (rev 1899)
@@ -993,3 +993,40 @@
 	background-color: rgb(127, 162, 202);
 }
 
+/*-----------*/
+/* Subscribe */
+/*-----------*/
+
+div#recaptcha_widget_div {
+    float: left;
+}
+
+
+/*********************/
+/* Dijit overloading */
+/*********************/
+.tundra .dijitTextBox {
+	margin: 0px;
+	background: rgb(235, 235, 235);
+	color: rgb(30, 30, 30);
+	border: 1px solid rgb(150, 150, 150);;
+    width: 150px;
+}
+
+input[type=textbox],
+.tundra .dijitTextBox {
+    width: 150px;
+}
+
+.tundra .dijitTextBox input.dijitInputInner {
+    width: auto;
+}
+
+.tundra .dijitTextBox input {
+    height: 16px;
+    padding: 1px 0px;
+}
+
+.dijitTooltip .dijitTooltipContents img {
+    vertical-align: middle;
+}

Messages sorted by: [ date | thread ]
Prev by Date: [vhffs-dev] [1898] Fixed formating bug in viewvc conf files.
Next by Date: [vhffs-dev] [1900] JS validation on login page.
Previous by thread: [vhffs-dev] [1898] Fixed formating bug in viewvc conf files.
Next by thread: [vhffs-dev] [1900] JS validation on login page.

Mail converted by MHonArc 2.6.19+

http://listengine.tuxfamily.org/