diff --git a/beat/web/reports/static/reports/app/directives/edit/addGroupMenu.js b/beat/web/reports/static/reports/app/directives/edit/addGroupMenu.js
index 98694e661a1a49ca994b1bace28da636e5f3e4e4..40dcee254cf0f470b02e624a51f3fd740d1b6dad 100644
--- a/beat/web/reports/static/reports/app/directives/edit/addGroupMenu.js
+++ b/beat/web/reports/static/reports/app/directives/edit/addGroupMenu.js
@@ -31,19 +31,32 @@ angular.module('reportApp')
 		scope: {
 		},
 		link: function(scope){
-			scope.createGroup = GroupsService.createGroup;
 			scope.newGroupName = { val: '' };
+			scope.hasError = (val) => {
+				// if val is undefined, empty, or a dup, its an err
+				const isErr = !val || val.length === 0 || GroupsService.groups.find(g => g.name === val);
+				// cast to boolean
+				return !!isErr;
+			};
+			scope.createGroup = () => {
+				if(scope.hasError(scope.newGroupName.val)){
+					return;
+				}
+
+				GroupsService.createGroup(scope.newGroupName.val);
+				scope.newGroupName.val = '';
+			};
 		},
 		template: `
-<form>
-	<div class='form-group'>
+<form ng-submit='createGroup()'>
+	<div class='form-group' ng-class="{'has-error': hasError(newGroupName.val)}">
 		<div class="input-group">
 			<span class="input-group-btn">
-				<button ng-click='createGroup(newGroupName.val)' class="btn btn-default" type="button">
+				<button ng-click='createGroup()' class="btn btn-default" type="button">
 					<i class="fa fa-plus" aria-hidden="true"></i>
 				</button>
 			</span>
-			<input id='createNewGroupInput' ng-model='newGroupName.val' type="text" class="form-control" placeholder="New group name...">
+			<input required id='createNewGroupInput' ng-model='newGroupName.val' type="text" class="form-control" placeholder="New group name...">
 		</div>
 	</div>
 </form>