Validate form using JavaScript

I have form where I am trying to validate fields on blur. I have developed this form using bootstrap.

VF page Code:

 <div class="form-group col-md-6 ">
            <label class="control-label col-md-4  labelTextAlign" for="fname">First Name: </label>
            <div class="col-md-8 ">
            <div class="input-group text-danger"> 
              <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
              <apex:input type="text" styleClass="form-control mandatory" value="{!firstName}" id="fname" html-placeholder="Enter First Name" />
              <!--<span class="display-hidden">Required </span>-->
            </div>

            </div>
          </div>

Javascript:

 $(document).ready(function()
      {
          $('.mandatory').blur(function()
          {
              var input = $(this);
              var input_val = input.val();
              if(input_val)
              {
                  input.removeClass('invalid_input').addClass('valid_input');
                  div.next().hide();
              }
              else
              {
                  input.removeClass('valid_input').addClass('invalid_input');
                  $(this).next().show();
              }
          });
      });

CSS:

    .valid_input
    {

    }
    .invalid_input
    {
        border:solid 1px red !important;
    }
    .display-hidden
    {
        display:none;
    }

Problem here is when I click on the field and blur out only the input field is being highlighted in red color

I want the whole field (Glyphicon and input field) should be highlighted in red color and below the field error message should be displayed.

Thanks in Advance!