Validation error fix

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.group.create/create.hbs

@@ -36,9 +36,11 @@
             <div class="form-login-box">
                 <label class="wr-input-label">Group Name</label>
 
-                <div class="wr-input-control">
+                <div class="form-group wr-input-control">
                     <input type="text right" id="name" placeholder="Group Name" data-regex="{{groupNameJSRegEx}}"
-                           data-errormsg="{{groupNameRegExViolationErrorMsg}}">
+                           data-errormsg="{{groupNameRegExViolationErrorMsg}}" class="form-control">
+                    <span class="groupNameError hidden glyphicon glyphicon-remove form-control-feedback"></span>
+                    <label class="error groupNameEmpty hidden" for="summary"></label>
                 </div>
 
                 <label class="wr-input-label">Description</label>

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.group.create/public/js/group-add.js

@@ -35,12 +35,10 @@ $(function () {
         var description = $("input#description").val();
 
         if (!name) {
-            $('.wr-validation-summary strong').text("Group Name is a required field. It cannot be empty.");
+            triggerError($("input#name"),"Group Name is a required field. It cannot be empty.");
-            $('.wr-validation-summary').removeClass("hidden");
             return false;
         } else if (!inputIsValid($("input#name").data("regex"), name)) {
-            $('.wr-validation-summary strong').text($("input#name").data("errormsg"));
+            triggerError($("input#name"),$("input#name").data("errormsg"));
-            $('.wr-validation-summary').removeClass("hidden");
             return false;
         } else {
             var group = {"name": name, "description": description};
@@ -69,6 +67,61 @@ $(function () {
     });
 });
 
+/**
+ * @param el
+ * @param errorMsg
+ *
+ * Triggers validation error for provided element.
+ * Note : the basic jQuery validation elements should be present in the markup
+ *
+ */
+function triggerError(el,errorMsg){
+    var parent = el.parents('.form-group'),
+        errorSpan = parent.find('span'),
+        errorMsgContainer = parent.find('label');
+
+    errorSpan.on('click',function(event){
+        event.stopPropagation();
+        removeErrorStyling($(this));
+        el.unbind('.errorspace');
+    });
+
+    el.bind('focusin.errorspace',function(){
+        removeErrorStyling($(this))
+    }).bind('focusout.errorspace',function(){
+        addErrorStyling($(this));
+    }).bind('keypress.errorspace',function(){
+        $(this).unbind('.errorspace');
+        removeErrorStyling($(this));
+    });
+
+    errorMsgContainer.text(errorMsg);
+
+    parent.addClass('has-error has-feedback');
+    errorSpan.removeClass('hidden');
+    errorMsgContainer.removeClass('hidden');
+
+    function removeErrorStyling(el){
+        var parent = el.parents('.form-group'),
+            errorSpan = parent.find('span'),
+            errorMsgContainer = parent.find('label');
+
+        parent.removeClass('has-error has-feedback');
+        errorSpan.addClass('hidden');
+        errorMsgContainer.addClass('hidden');
+    }
+
+    function addErrorStyling(el){
+        var parent = el.parents('.form-group'),
+            errorSpan = parent.find('span'),
+            errorMsgContainer = parent.find('label');
+
+        parent.addClass('has-error has-feedback');
+        errorSpan.removeClass('hidden');
+        errorMsgContainer.removeClass('hidden');
+    }
+}
+
 function displayErrors(message) {
     $('#error-msg').html(message.responseText);
     modalDialog.header('Unexpected error occurred!');