show validation errors on register

public/src/client/register.js

@@ -1,6 +1,6 @@
 'use strict';
 
-/* globals define, app, utils, socket, config */
+/* globals define, app, utils, socket, config, translator */
 
 
 define('forum/register', ['csrf'], function(csrf) {
@@ -8,46 +8,109 @@ define('forum/register', ['csrf'], function(csrf) {
 		validationError = false,
 		successIcon = '<i class="fa fa-check"></i>';
 
-	function showError(element, msg) {
+	Register.init = function() {
-		translator.translate(msg, function(msg) {
+		var email = $('#email'),
-			element.html(msg);
+			username = $('#username'),
-			element.parent()
+			password = $('#password'),
-				.removeClass('alert-success')
+			password_confirm = $('#password-confirm'),
-				.addClass('alert-danger');
+			register = $('#register'),
-			element.show();
+			agreeTerms = $('#agree-terms');
+
+		$('#referrer').val(app.previousUrl);
+
+		email.on('blur', function() {
+			if (email.val().length) {
+				validateEmail(email.val());
+			}
 		});
-		validationError = true;
+
+		username.on('keyup', function() {
+			$('#yourUsername').text(this.value.length > 0 ? this.value : 'username');
+		});
+
+		username.on('blur', function() {
+			if (username.val().length) {
+				validateUsername(username.val());
 			}
+		});
 
-	function showSuccess(element, msg) {
+		password.on('blur', function() {
-		translator.translate(msg, function(msg) {
+			if (password.val().length) {
-			element.html(msg);
+				validatePassword(password.val(), password_confirm.val());
-			element.parent()
+			}
-				.removeClass('alert-danger')
-				.addClass('alert-success');
-			element.show();
 		});
+
+		password_confirm.on('blur', function() {
+			if (password_confirm.val().length) {
+				validatePasswordConfirm(password.val(), password_confirm.val());
 			}
+		});
+
+		function validateForm(callback) {
+			validationError = false;
+			validatePassword(password.val(), password_confirm.val());
+			validatePasswordConfirm(password.val(), password_confirm.val());
+
+			validateEmail(email.val(), function() {
+				validateUsername(username.val(), callback);
+			});
+		}
+
+		register.on('click', function(e) {
+			var registerBtn = $(this);
+			e.preventDefault();
+			validateForm(function() {
+				if (!validationError) {
+					registerBtn.addClass('disabled');
+
+					registerBtn.parents('form').ajaxSubmit({
+						headers: {
+							'x-csrf-token': csrf.get()
+						},
+						success: function(data, status) {
+							window.location.href = data;
+						},
+						error: function(data, status) {
+							var errorEl = $('#register-error-notify');
+							translator.translate(data.responseText, config.defaultLang, function(translated) {
+								errorEl.find('p').text(translated);
+								errorEl.show();
+								registerBtn.removeClass('disabled');
+							});
+						}
+					});
+				}
+			});
+		});
+
+		if(agreeTerms.length) {
+			agreeTerms.on('click', function() {
+				if ($(this).prop('checked')) {
+					register.removeAttr('disabled');
+				} else {
+					register.attr('disabled', 'disabled');
+				}
+			});
+
+			register.attr('disabled', 'disabled');
+		}
+	};
 
 	function validateEmail(email, callback) {
 		callback = callback || function() {};
 		var email_notify = $('#email-notify');
 
-		if (!email) {
-			validationError = true;
-			return;
-		}
-
 		if (!utils.isEmailValid(email)) {
 			showError(email_notify, '[[error:invalid-email]]');
-			return;
+			return callback();
 		}
 
 		socket.emit('user.emailExists', {
 			email: email
 		}, function(err, exists) {
-			if(err) {
+			if (err) {
-				return app.alertError(err.message);
+				app.alertError(err.message);
+				return callback();
 			}
 
 			if (exists) {
@@ -65,11 +128,6 @@ define('forum/register', ['csrf'], function(csrf) {
 
 		var username_notify = $('#username-notify');
 
-		if (!username) {
-			validationError = true;
-			return;
-		}
-
 		if (username.length < config.minimumUsernameLength) {
 			showError(username_notify, '[[error:username-too-short]]');
 		} else if (username.length > config.maximumUsernameLength) {
@@ -96,10 +154,6 @@ define('forum/register', ['csrf'], function(csrf) {
 	}
 
 	function validatePassword(password, password_confirm) {
-		if (!password) {
-			validationError = true;
-			return;
-		}
 		var password_notify = $('#password-notify'),
 			password_confirm_notify = $('#password-confirm-notify');
 
@@ -131,85 +185,27 @@ define('forum/register', ['csrf'], function(csrf) {
 		}
 	}
 
-	Register.init = function() {
+	function showError(element, msg) {
-		var email = $('#email'),
+		translator.translate(msg, function(msg) {
-			username = $('#username'),
+			element.html(msg);
-			password = $('#password'),
+			element.parent()
-			password_confirm = $('#password-confirm'),
+				.removeClass('alert-success')
-			register = $('#register'),
+				.addClass('alert-danger');
-			agreeTerms = $('#agree-terms');
+			element.show();
-
-		$('#referrer').val(app.previousUrl);
-
-		email.on('blur', function() {
-			validateEmail(email.val());
-		});
-
-		username.on('keyup', function() {
-			$('#yourUsername').text(this.value.length > 0 ? this.value : 'username');
-		});
-
-		username.on('blur', function() {
-			validateUsername(username.val());
-		});
-
-		password.on('blur', function() {
-			validatePassword(password.val(), password_confirm.val());
-		});
-
-		password_confirm.on('blur', function() {
-			validatePasswordConfirm(password.val(), password_confirm.val());
-		});
-
-		function validateForm(callback) {
-			validationError = false;
-			validatePassword(password.val(), password_confirm.val());
-			validatePasswordConfirm(password.val(), password_confirm.val());
-
-			validateEmail(email.val(), function() {
-				validateUsername(username.val(), callback);
 		});
+		validationError = true;
 	}
 
-		register.on('click', function(e) {
+	function showSuccess(element, msg) {
-			var registerBtn = $(this);
+		translator.translate(msg, function(msg) {
-			e.preventDefault();
+			element.html(msg);
-			validateForm(function() {
+			element.parent()
-				if (!validationError) {
+				.removeClass('alert-danger')
-					registerBtn.addClass('disabled');
+				.addClass('alert-success');
-
+			element.show();
-					registerBtn.parents('form').ajaxSubmit({
-						headers: {
-							'x-csrf-token': csrf.get()
-						},
-						success: function(data, status) {
-							window.location.href = data;
-						},
-						error: function(data, status) {
-							var errorEl = $('#register-error-notify');
-							translator.translate(data.responseText, config.defaultLang, function(translated) {
-								errorEl.find('p').text(translated)
-								errorEl.show();
-								registerBtn.removeClass('disabled');
-							});
-						}
-					});
-				}
-			});
 		});
-
-		if(agreeTerms.length) {
-			agreeTerms.on('click', function() {
-				if ($(this).prop('checked')) {
-					register.removeAttr('disabled');
-				} else {
-					register.attr('disabled', 'disabled');
 	}
-			});
 
-			register.attr('disabled', 'disabled');
-		}
-	};
 
 	return Register;
 });