$('.login-form').validate ({
        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-group').addClass('error-class').append($(this));
        });
    },

        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 40
            },

          password: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
            },

        messages: {
            username: {
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            },
                       password: {
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            },

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }
        },

  submitHandler: function() {
            $('#noenter').show();

        }
    });

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<form class="login-form" action="login" method="post" action="../PHP/ValidateForm.php">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="color:red;" id="myModalLabel">TITLE</h4>
      </div>
     <div class="modal-body">
          <!-- Text input-->
                           <div class="form-group">

                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-2x fa-user"></i></span>
                                            <input required id="username" name="username" placeholder="Username or Email" class="inputfield form-control"  type="text">


                                </div>
                              </div>

                               <!-- Text input-->
                           <div class="form-group">

                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-2x fa-lock"></i></span>
                                            <input required id="password" name="password" placeholder="Password" class="form-control"  type="password">


                                </div>
                              </div>
<div class="error">

</div>
             <input title="Log In" name="submit" value="Log In" type="submit" class="loginbtn btn btn-lg btn-block">
      </div>

      <p class="text-muted"><strong>Need an account? <a href="#">Join </a></strong>

      </p>


    </div>
  </div>
  </form>
</div>

.form-control {color:#000 !important;}



form label.error-class{font:15px Tahoma,sans-serif;color:#ED7476;margin-left:5px;position:relative;}

form input.error-class,form input.error-class:hover,form input.error:focus,form select.error-class,form textarea.error-class{background:#FFEDED; }

.error-class {
    color:red;  z-index:0; position:relative; display:inline-block; }

.valid-class {
    color:black;
}

$('.login-form').validate ({

        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",
    errorElement: 'div',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-group').addClass('error-class').append($(this));
        });
    },

        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 40
            },

          password: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
            },

        messages: {
            username: {
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            },
                       password: {
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            },

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }
        },

  submitHandler: function() {
            $('#noenter').show();

        }

    });

.error-class {
    color:red;  z-index:0; position:relative; display:block; text-align: left; }

<div class="input-group">
  <i class="fa fa-2x fa-user"></i>
  <span class="input-group-addon"></span>
   <input required id="username" name="username" placeholder="Username or Email"          class="inputfield form-control"  type="text">
</div>

$('#form-enroll').validate({
    ...
    errorPlacement: function(error, element) {
        $(element).parents('.form-group').append(error)
    },
})