Add the error class only on the input zone

WHen you type an invalid room name

public/js/vroom.js

@@ -243,7 +243,10 @@ function initIndex(){
     e.preventDefault();
     // Do not submit if we know the name is invalid
     if (!$('#roomName').val().match(/^[\w\-]{0,49}$/)){
-      $('#roomName').notify(locale.ERROR_NAME_INVALID, 'error');
+      $('#roomName').parent().parent().notify(locale.ERROR_NAME_INVALID, {
+         class: 'error',
+         position: 'bottom center'
+      });
     }
     else{
       $.ajax({
@@ -263,7 +266,7 @@ function initIndex(){
             $('#conflictModal').modal('show');
           }
           else{
-            $('#roomName').notify(data.msg, 'error');
+            $('#roomName').parent().parent().notify(data.msg, 'error');
           }
         },
         error: function(){

templates/default/index.html.ep

@@ -11,7 +11,6 @@
     </h2>
     <form id="createRoom" class="form-inline" action="<%= $self->get_url('/create') %>" method="post">
       <fieldset>
-        <div class="control-group">
         <div class="input-group input-group-lg">
           <span class="input-group-addon hidden-xs">
             <strong class="text-muted">
@@ -23,12 +22,13 @@
               <%= $url %>
             </strong>
           </span>
-            <input id="roomName" name="roomName" type="text" placeholder="<%=l 'ROOM_NAME' %>" class="form-control help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RANDOM_IF_EMPTY' %>" autofocus>
+          <div class="control-group">
+            <input id="roomName" name="roomName" type="text" placeholder="<%=l 'ROOM_NAME' %>" class="form-control input-lg help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RANDOM_IF_EMPTY' %>" autofocus>
+          </div>
           <span class="input-group-btn">
             <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button>
           </span>
         </div>
-        </div>
       </fieldset>
     </form>
   </div>