jquery validation has-error class setting

I am using jquery validation plug-in for validating the form inputs. I am able to validate the input and error message is shown properly. But the issue is , the element is not highlighted with red color. I have analysed and found the issue is with has-error class.

The error class is only set when I am putting the form-controls inside a div with class form-group. Otherwise has-error class is not at all set . Please advice on this.

Thanks.

JS and HTML :

<html>
<head>
  <script src="jquery.min.js"></script>
  <script src="jquery.validate.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <link href="bootstrap.min.css" rel="stylesheet">

  <script>

  // When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("#register-form").validate({

        // Specify the validation rules
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },

        // Specify the validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        },
        highlight: function (element, errorClass) {
                $(element).closest('.form-control').addClass('has-error');
                //$(element).addClass('has-error');
            },
            unhighlight: function (element, errorClass) {
                $(element).closest(".form-control").removeClass("has-error");
            },
        submitHandler: function(form) {
            cosole.log("valid >>"+form.isValid());
            form.submit();
        },

    });

  });


  </script>

</head>
<body>
  <h1>Register here</h1>

  <!--  The form that will be parsed by jQuery before submit  -->
  <div>
  <form action="" method="post" id="register-form" novalidate="novalidate">

    <label>First Name</label><input class="form-control" type="text" id="firstname" name="firstname" /><br />
    <label>Last Name</label><input class="form-control" type="text" id="lastname" name="lastname" /><br />
    <label>Email</label><input class="form-control" type="text" id="email" name="email" /><br />
    <label>Password</label><input class="form-control" type="password" id="password" name="password" /><br />
    <div style="margin-left:140px;"> <button type="submit" name="customName" id="UpdateButton" value="MySubmit" class="btn btn-sm btn-bitbucket"> <i id="setHubTypeTag" class="demo-icon icon-cw-1 fa-fw" style="font-size:1.3em;"> </i> &nbsp;Update</button></div>

  </form>
  <div>
  <script>
  $(document).ready(function () {
    $('#UpdateButton').click(function () {
        console.log("test");
    });
  });
  </script>
</body>
</html>