How To Put Red Border In The Radio Button If Jquery Validation Activates

My problem is i cant make the radio button have a red border if the jquery validation activates just like in the example picture. Can anyone help me with this please. http://i38.ph

Solution 1:

You can't add border to radio button but you can go with,

input[type="radio"]:focus, input[type="radio"]:active {
    -webkit-box-shadow:inset 2px 1px 1px , 1px 1px 3px #008000;
    -moz-box-shadow:inset 2px 1px 1px #008000, 1px 1px 3px #008000;
    box-shadow:inset 2px 1px 1px #008000, 1px 1px 3px #008000;
}

Solution 2:

try this.. this will not create the red circle in the radio button but help user understand the required field.

<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>
                            <p class="help-block"> Please Choose your gender</p>
                        </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 value="">Month</option>
                                </select>
                                <select name="day" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bday">
                                    <option value="">Day</option>
                                </select>
                                <select name="year" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="byear">
                                    <option value="">Year</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group input-group">
                            <button type="submit" class="btn btn-info input-default" id="create">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

http://jsfiddle.net/alaskaz1864/5kcsn/51/

Solution 3:

use box shadow the border color

 <input type="radio" required="required" value="female" name="gender" style="box-shadow: 0px 2px 8px rgb(255, 0, 0);">