如何把一个jquery valdiation红框效果在单选按钮 [英] How to put a jquery valdiation red box effect in radio buttons

问题描述

如果jQuery验证激活就像在示例图片中，我想制作一个红色阴影框/红色边框。任何人可以帮助我这个请吗？我的代码如下所示：

I would like to make a red shadow box / red border if the jQuery validation activates just like in the example picture. Can anyone help me with this please? My code is shown below:

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

}）;

输出I想要：

当前输出： http://jsfiddle.net/5kcsn/47/

推荐答案

工作范例： a href =http://jsfiddle.net/Gajotres/5kcsn/53/ =nofollow> http://jsfiddle.net/Gajotres/5kcsn/53/

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

使用验证插件时，单无线电元件。这是因为它们都形成一个单一的实体。在这个例子中，如果输入元素有无线电类型代码将突出他们的父对象。

When working with validation plugin you can't highlight single radio elements. This is because all of them form one single entity. In this example, if input element has radio type code will highlight their parent object.

随时问问你是否有更多的问题？

Feel free to ask if you have more questions?

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

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

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：

CSS:

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

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

这篇关于如何把一个jquery valdiation红框效果在单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！