Add 'Validate' button to new_channel page and disable submit until validated. This is to get around the issue that clicking submit without ever focusing and blurring the nickname field won't actually submit the form but only provide validation. It needs to be clicked again to submit. The first click processed the blur but remained on the page with no feedback. If somebody has better workarounds, please provide. The goal is to ensure that the name and the nickname are both validated before we can submit.

3 files changed, 27 insertions, 13 deletions

diff --git a/Zotlabs/Module/New_channel.php b/Zotlabs/Module/New_channel.php
index 9f2fea802..548f28c4f 100644
--- a/Zotlabs/Module/New_channel.php
+++ b/Zotlabs/Module/New_channel.php
@@ -142,6 +142,7 @@ class New_channel extends \Zotlabs\Web\Controller {
 			'$role'		=> $role,
 			'$default_role' => $default_role,
 			'$nickname'     => $nickname,
+			'$validate'     => t('Validate'),
 			'$submit'       => t('Create'),
 			'$channel_usage_message' => $channel_usage_message
 		));
diff --git a/view/js/mod_new_channel.js b/view/js/mod_new_channel.js
index e670e1a35..7ae59032a 100644
--- a/view/js/mod_new_channel.js
+++ b/view/js/mod_new_channel.js
@@ -1,5 +1,7 @@
 	$(document).ready(function() {
-//		$("#id_permissions_role").sSelect();
+
+		$("#newchannel-submit-button").attr('disabled','disabled');
+
 		$("#id_name").blur(function() {
 			$("#name-spinner").show();
 			var zreg_name = $("#id_name").val();
@@ -13,17 +15,26 @@
 			});
 		});
 
-		$("#id_nickname").blur(function() {
-			$("#nick-spinner").show();
-			var zreg_nick = $("#id_nickname").val();
-			$.get("new_channel/checkaddr.json?f=&nick=" + encodeURIComponent(zreg_nick),function(data) {
-				$("#id_nickname").val(data);
-				if(data.error) {
-					$("#help_nickname").html("");
-					zFormError("#help_nickname",data.error);
-				}
-				$("#nick-spinner").hide();
-			});
+		$("#id_nickname").click(function() {
+			$("#newchannel-submit-button").attr('disabled','disabled');
 		});
 
 	});
+
+
+	function validate_channel() {
+		$("#nick-spinner").show();
+		var zreg_nick = $("#id_nickname").val();
+		$.get("new_channel/checkaddr.json?f=&nick=" + encodeURIComponent(zreg_nick),function(data) {
+			$("#id_nickname").val(data);
+			if(data.error) {
+				$("#help_nickname").html("");
+				zFormError("#help_nickname",data.error);
+			}
+			else {
+				$("#newchannel-submit-button").removeAttr('disabled');
+			}
+			$("#nick-spinner").hide();
+		});
+
+	}
diff --git a/view/tpl/new_channel.tpl b/view/tpl/new_channel.tpl
index c4837064f..f415e4e2c 100755
--- a/view/tpl/new_channel.tpl
+++ b/view/tpl/new_channel.tpl
@@ -24,7 +24,9 @@
 			{{include file="field_input.tpl" field=$nickname}}
 			<div id="nick-spinner" class="spinner-wrapper"><div class="spinner m"></div></div>
 
-			<button class="btn btn-primary" type="submit" name="submit" id="newchannel-submit-button" value="{{$submit}}">{{$submit}}</button>
+			<button class="btn btn-secondary" name="validate" id="newchannel-validate-button" value="{{$validate}}" onclick="validate_channel(); return false;">{{$validate}}</button>
+
+			<button class="btn btn-primary" type="submit" name="submit" id="newchannel-submit-button" value="{{$submit}}" >{{$submit}}</button>
 			<div id="newchannel-submit-end" class="clear"></div>
 
 			<div id="newchannel-import-link" class="descriptive-paragraph" >{{$label_import}}</div>