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

});

我想要的输出：

电流输出：http://jsfiddle.net/5kcsn/47/

解决方法:

工作示例：http://jsfiddle.net/Gajotres/5kcsn/53/

我已更改此代码段：

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

使用验证插件时,您不能突出显示单个无线电元素.这是因为它们全部形成一个单独的实体.在此示例中,如果输入元素具有单选类型代码,则将突出显示其父对象.

随意问您还有其他问题吗？

更新：

叫我超人：http://jsfiddle.net/Gajotres/5kcsn/54/

HTML：

<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>

JavaScript：

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

CSS：

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

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

标签：jquery-validate,css,html,javascript,jquery
来源： https://codeday.me/bug/20191029/1960096.html