Javascript 如何在单选按钮中放置jquery valdiation红盒效果

如果jQuery验证像示例图片中一样激活，我想创建一个红色阴影框/红色边框。有人能帮我吗？我的代码如下所示：

$(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") == "day" || element.attr("name") == "month" || element.attr("name") == "year") {
            error.insertAfter(".dateWrap");

        } else error.insertAfter(element);

        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

$（文档）.ready（函数（）{
var月=[]，
日期=[]，
年份=[]；
对于（var i=1；i工作示例：

我已更改此代码段：

  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');
    },

为此：

  highlight: function (element) {
        $(element).closest('.form-group').removeClass('valid').addClass('has-error');       

        if($(element).is('[type="radio"]')) {
            $(element).parent().addClass('select-class radio-class');
        }  else {
            $(element).addClass('select-class radio-class');
        }        
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('valid');

        if($(element).is('[type="radio"]')) {
            $(element).parent().removeClass('select-class radio-class');
        }  else {
            $(element).removeClass('select-class radio-class');
        }              
    },

使用验证插件时，不能突出显示单个单选元素。这是因为所有元素都形成一个实体。在本例中，如果输入元素具有单选类型代码，则将突出显示其父对象

如果您还有更多问题，请随时提问

更新：
叫我超人：

HTML:
CSS:
你已经说你的盒子像图片一样，他说他想要这样的东西。请不要多次发布同样的问题。我关闭了因为这个答案。嗨，@ USSR。我想找到一个解决方案，给回答者和你自己都带来一些声誉。很抱歉反应太晚，我睡着了。我现在起来投票谢谢
<div class="form-group input-group">
    <div class="custom-radio-parent">
        <input type="radio" name="gender" value="male" required="required" />
        <label id="myGender">&nbsp;Male&nbsp;&nbsp;</label>
    </div>
    <div class="custom-radio-parent">
        <input type="radio" name="gender" value="female" required="required" />
        <label id="myGender">&nbsp;Female</label>
    </div>
</div>

  highlight: function (element) {
        $(element).closest('.form-group').removeClass('valid').addClass('has-error');       

        if($(element).is('[type="radio"]')) {
            $(element).parent().parent().find('div').each(function() {
                $(this).addClass('select-class radio-class');
            });
        }  else {
            $(element).addClass('select-class radio-class');
        }        
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('valid');

        if($(element).is('[type="radio"]')) {
            $(element).parent().parent().find('div').each(function() {
                $(this).removeClass('select-class radio-class');
            });                
        }  else {
            $(element).removeClass('select-class radio-class');
        }              
    },

.custom-radio-parent {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
}

.custom-radio-parent:first-child {
    margin-right: 5px;
}