Bootstrap 3 + Validation Plugin

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<form>
    <div class="row">
        <div>
            <label for="fullname" class="col-sm-3 control-label">Name:&nbsp;<a href="#" data-toggle="tooltip" data-original-title="Required, maximum of 50 alpha-numeric field" data-placement="right"><span class="glyphicon glyphicon-info-sign"></a>
                </span>
            </label>
        </div>
        <div class="col-sm-7">
            <input type="text" id="memberName" name="MemberName" class="form-control" placeholder="Member Name" maxlength="55" required />
        </div>
        <div class="col-sm-2"></div>
    </div>
    <br/>
    <!-- Region -->
    <div class="row">
        <div>
            <label for="fullname" class="col-sm-3 control-label">Region:&nbsp;<a href="#" data-toggle="tooltip" data-original-title="Required, maximum of 50 alpha-numeric field" data-placement="right"><span class="glyphicon glyphicon-info-sign"></a>
                </span>
            </label>
        </div>
        <div class="col-sm-7">
            <input id="add-connection-regions" style="width: 250px;" class="form-control" required/>
        </div>
        <div class="col-sm-4"></div>
    </div>
    <br/>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

CSS

body {
    padding: 40px;
}
.help-block{
    font-size:0.9em !important;
}

JavaScript

$('form').validate({
        highlight: function (element) {
            $(element).closest('.row').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.row').removeClass('has-error ');

        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
    $(function () {
        $('a[data-toggle="tooltip"]').tooltip({
            animated: 'fade'
        });
    });