Add input text length limits to name, gameroom, and chat inputs.

jlas · Nov 5, 2012 · aee5be3 · aee5be3
1 parent b60276e
commit aee5be3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/game-client.js b/game-client.js
@@ -42,6 +42,10 @@ var ushapes = {
     "clover": "&#9827;"
 };
 
+// REs to limit input
+NAMERE = /^.{1,12}$/;
+CHATRE = /^.{1,500}$/;
+
 // How long to let each turn last for, in seconds
 var COUNTDOWNTIME = 300;  // 5 min
 
@@ -369,7 +373,13 @@ function drawHowTo() {
 function drawChatIn() {
     $(CHATIN).show();
     function submit() {
-        var my_player = $.cookie("player");
+        var chatin = $(CHATIN+"> input")[0].value;
+        if (!CHATRE.test(chatin)) {
+            if(chatin) {
+                alert("Your input text is too long!");
+            }
+            return false;
+        }
         var game = $.cookie("game");
         var resource;
         if (game) {
@@ -378,8 +388,8 @@ function drawChatIn() {
             resource = "/chat";
         }
         $.post(resource, {
-            input: $(CHATIN+"> input")[0].value,
-            name: my_player
+            input: chatin,
+            name: $.cookie("player")
         }, function() {
             $(CHATIN+"> input").val('');  // post was succesful, so clear input
             drawChatLog();
@@ -403,6 +413,12 @@ function drawAddGuest() {
     $(ADDGUEST).show();
     function submit() {
         var name =  $(ADDGUESTFRM+"> input")[0].value;
+        if (!NAMERE.test(name)) {
+            if(name) {
+                alert("Your input text is too long!");
+            }
+            return false;
+        }
         $.cookie("player", name);
         main();
     }
@@ -479,7 +495,14 @@ function drawGameList(games) {
     }
 
     function submit() {
-        $.post('/games', {name: $(ADDGAME+"> input")[0].value},
+        var gamenm = $(ADDGAME+"> input")[0].value;
+        if (!NAMERE.test(gamenm)) {
+            if(gamenm) {
+                alert("Your input text is too long!");
+            }
+            return false;
+        }
+        $.post('/games', {name: gamenm},
 
                /**
                 * @param data: {obj} contains potential random game name,

diff --git a/index.html b/index.html
@@ -45,7 +45,8 @@
           <p>Make one!</p>
         </div>
         <div id="add_game">
-          <input type="text" class="text" />
+          <input type="text" class="text" required maxlength="12"
+                 title="Game Room name (max 12 characters.)" />
           <button>New Game</button>
         </div>
         <hr/>
@@ -66,7 +67,8 @@
         <p>is an open source clone of the
           <a href="http://www.google.com/search?q=qwirkle">Qwirkle</a> board game.</p>
         <p>What would you like to be called?</p>
-        <input type="text" class="text" />
+        <input type="text" class="text" required maxlength="12"
+               title="User name (max 12 characters.)"/>
         <button>Ok</button>
       </div>
     </div>
@@ -75,7 +77,8 @@
 
     <div id="chat_panel" style="display: none;">
       <div id="chat_input" style="display: none">
-        <input type="text" class="text" />
+        <input type="text" class="text" required maxlength="500"
+               title="Chat text (max 500 characters.)" />
         <button>Chat</button>
       </div>
       <div id="chat_log" class="text"></div>