Switch to side-by-side view

--- a/opensourceprojects/templates/create_account.html
+++ b/opensourceprojects/templates/create_account.html
@@ -1,33 +1,79 @@
 {% set hide_left_bar = True %}
 {% extends g.theme.master %}
 
-{% block title %}Create an Account{% endblock %}
+{% block title %}Create an account{% endblock %}
 
-{% block header %}Create an Account{% endblock %}
+{% block header %}Creating a new account{% endblock %}
 
 {% block content %}
-<div class="grid-20">
+<div class="createacc">
+<div class="grid-20 signform">
   {{ c.form.display() }}
+</div>
 </div>
 {% endblock %}
 
 {% block extra_js %}
   <script type="text/javascript">
     /*<![CDATA[*/
-    $('#create_account').submit(function () {
-      if (!$('#username').attr('value').match(/^[a-zA-Z0-9]+$/)) {
-        alert('Username can only contain numbers and letters.');
-        return false;
-      }
-      if ($('#password').attr('value').length < 8) {
-        alert('Password must be at least 8 characters long.');
-        return false;
-      }
-      if ($('#password').attr('value') !== $('#confirm_password').attr('value')) {
-        alert('Password and Confirm Password must match.');
-        return false;
-      }
+
+    function unmark(inp) {
+        $(inp).parent('.fieldcontainer').removeClass('fielderror')
+    }
+
+    function mark_ok(inp) {
+        $(inp).parent('.fieldcontainer').removeClass('fielderror')
+    }
+
+    function mark_fail(inp, msg) {
+        $(inp).parent('.fieldcontainer').addClass('fielderror')
+        $(inp).siblings('.fielderror').children('.msg').text(msg);
+    }
+
+    function validEmail(email) {
+        var re = /\S+@\S+\.\S+/;
+        return re.test(email);
+    }
+
+    function check_mail(inp) {
+        if ( !validEmail(inp.value)) {
+            mark_fail(inp, 'Please enter a valid email address');
+            return false;
+        }
+
+        unmark(inp);
+        return true;
+    }
+
+    function check_displayname(inp) {
+       if ( inp.value.length < 1) {
+            mark_fail(inp, 'Please enter a value');
+       } else {
+            unmark(inp);
+       }
+    }
+
+    function check_username(inp) {
+        if (! inp.value.match(/^[a-z][-a-z0-9]*$/)) {
+            mark_fail(inp, 'Usernames must include only letters, numbers, and dashes.');
+        } else if (inp.value.length < 3) {
+            mark_fail(inp, 'The username must be at least 3 characters long');
+        } else {
+            unmark(inp);
+        }
+    }
+
+    $('form .displayname').blur(function() {
+        check_displayname(this);
     });
-    /*]]>*/
+
+    $('form .username').blur(function() {
+        check_username(this);
+    });
+
+    $('form .email').blur(function(){
+        check_mail(this);
+    });
+
   </script>
 {% endblock %}