got username validation working

public/less/install.less

@@ -1,15 +1,31 @@
 .btn, .form-control, .navbar { border-radius: 0; }
 .container { font-size: 18px; }
 body, small, p, div { font-family: "Roboto", sans-serif; }
+
 .input-row {
 	margin-bottom: 20px;
-}
+
-.input-row.active .input-field {
+	&.active {
-	border-right: 5px solid #BF3E11;
+		.input-field {
-	padding-right: 20px;
+			border-right: 5px solid #38B44A;
-}
+			padding-right: 20px;
-.input-row.active .help-text {
+		}
-	display: block;
+
+		.help-text {
+			display: block;
+		}
+	}
+
+	&.error {
+		.input-field {
+			border-right: 5px solid #BF3E11;
+			padding-right: 20px;
+		}
+
+		.help-text {
+			display: block;
+		}
+	}
 }
 
 .help-text {

public/src/installer/install.js

@@ -8,8 +8,13 @@ $('document').ready(function() {
 
 	function setupInputs() {
 		$('.form-control').on('focus', function() {
+			var parent = $(this).parents('.input-row');
+
 			$('.input-row.active').removeClass('active');
-			$(this).parents('.input-row').addClass('active');
+			parent.addClass('active').removeClass('error');
+
+			var help = parent.find('.help-text');
+			help.html(help.attr('data-help'));
 		});
 
 		$('[name="username"]').on('blur', validateUsername);
@@ -19,12 +24,14 @@ $('document').ready(function() {
 	function validateUsername() {
 		var $this = $(this),
 			username = $this.val(),
-			help = $this.parents('.input-row').children('.help-text');
+			parent = $this.parents('.input-row'),
+			help = parent.children('.help-text');
 
 		if (!utils.isUserNameValid(username) || !utils.slugify(username)) {
+			parent.addClass('error');
 			help.html('Invalid Username.');
 		} else {
-			help.html('');
+			parent.removeClass('error');
 		}
 	}
 });

src/views/install/index.tpl

@@ -53,18 +53,14 @@
 					<label for="username">Username</label>
 					<input type="text" class="form-control" name="username" placeholder="Username" />	
 				</div>
-				<div class="col-sm-4 help-text">
+				<div class="col-sm-4 help-text" data-help="<strong>Enter an alphanumeric username. Spaces between words are allowed.</strong> You can always change your username later on your profile page."></div>
-					
-				</div>
 			</div>
 			<div class="row input-row">
 				<div class="col-sm-8 col-xs-12 input-field">
 					<label for="password">Password</label>
 					<input type="password" class="form-control" name="password" placeholder="Username" />	
 				</div>
-				<div class="col-sm-4 help-text">
+				<div class="col-sm-4 help-text" data-help="Here is some sample help text. Username should be between <strong>6</strong> and <strong>12</strong> characters long."></div>
-					Here is some sample help text. Username should be between <strong>6</strong> and <strong>12</strong> characters long.
-				</div>
 			</div>
 		</form>
 	</div>