test

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form>
    <div class="container">
        <div class="row">
            <div class="col-xs-11">
                <br />
                <div class="row">
                    <div class="col-sm-7">
                        <div class="form-group">
                            <input type="text" id="name" class="form-control" name="name" placeholder="Your Name" required="required" />
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="form-group">
                            <input type="text" id="age" class="form-control" name="age" placeholder="Your Age" required="required" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group input-group">
                            <input type="radio" name="gender" value="male" required="required" />
                            <label id="myGender">&nbsp;Male&nbsp;&nbsp;</label>
                            <input type="radio" name="gender" value="female" required="required" />
                            <label id="myGender">&nbsp;Female</label>
                        </div>
                    </div>
                     <div class="col-sm-12 dateWrap">
                        <div class="form-group input-group">
                            <div class="btn-group input-group">	<span class="input-group-addon fixedSize">Birthday</span>

                                <select name="month" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bmonth">
                                    <option...

CSS

.has-error input {
    background: url('http://i38.photobucket.com/albums/e149/eloginko/invalid_zpseed3b88d.png') no-repeat 95% 7px;    
}

.valid input {
    background: url('http://i38.photobucket.com/albums/e149/eloginko/valid_zps1673bdcf.png') no-repeat 95% 7px;    
}

.help-block {
    color: #a94442;
}

.select-class{
    border: solid 1px #a94442;

}
.radio-class{
    border: solid 1px #a94442;

}
.fixedSize {
    display: block;
    width: 120px;
    height: 32px;
    float: left;
}
.dateWrap {
    height: 32px;
    overflow: visible;
    margin-bottom: 1.0em;
    z-index: 2;
}
.myFooter {
    overflow: hidden;
    z-index: 1;
}

JavaScript

$(document).ready(function () {
  var month = [],
        day = [],
        year = [];

    for (var i = 1; i <= 12; i++) {
        month.push(i);
    }
    for (var i = 1; i <= 31; i++) {
        day.push(i);
    }
    for (var i = 1900; i <= (new Date().getFullYear()); i++) {
        year.push(i);
    }
    $.each(day, function (index, d) {
        $("#bday").append("<option value = '" + d + "'>" + d + "</option>");
    });
    $.each(month, function (index, m) {
        $("#bmonth").append("<option value = '" + m + "'>" + m + "</option>");
    });
    $.each(year, function (index, y) {
        $("#byear").append("<option value = '" + y + "'>" + y + "</option>");
    });

$.validator.messages.required = '';
    $('form').validate({
        rules: {
            name: {
                minlength: 4,
                maxlength: 15,
                required: true
            },
            age: {
                minlength: 4,
                maxlength: 15,
                required: true
            },
            gender: {
                required: true
            },
       month: {
                required: true
            },
            day: {
                required: true
            },
            year: {
                required: true
            }
        },
        groups: {
            DateofBirth: "month day year"
        },
      highlight: function (element) {
            $(element).closest('.form-group').removeClass('valid').addClass('has-error');
            $(element).addClass('select-class');
            $(element).addClass('radio-class');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('valid');
            $(element).removeClass('select-class');
            $(element).removeClass('radio-class');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.attr("name") ==...