How to put a jquery valdiation red box effect in radio buttons

Question

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 bel

Answer 1

Working example: http://jsfiddle.net/Gajotres/5kcsn/53/

I have changed this snippet:

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

to this:

  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?

Update:

Call me Superman : 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;
}