when using jQuery Validation I can't use my custom class

Question

I have a form with radio buttons which I want to validate

the problem is that I already have class for the radio buttons , therefore when i add the class required it does not work, but when I remove my class it does work.

here is the code:

html

<form id="ratingform" >
<div class="row"> 
<div class="col-md-2" > <span style="color:#1eb682;">وضوح الشرح </span> </div>
<div class="col-md-8 ol-md-pull-5">
<input  type="radio" value='1' name="Clarity" id="Greenradio1" class="css-checkbox required" /><label  id="Greenradio1" for="Greenradio1" class="css-label"></label>
<input type="radio" value='2' name="Clarity" id="Greenradio2"  class="css-checkbox" /><label id="Greenradio2"for="Greenradio2" class="css-label"></label>
<input type="radio" value='3' name="Clarity" id="Greenradio3" class="css-checkbox" /><label id="Greenradio3" for="Greenradio3" class="css-label"></label>
<input type="radio" value='4' name="Clarity" id="Greenradio4" class="css-checkbox" /><label id="Greenradio4" for="Greenradio4" class="css-label"></label>
<input type="radio" value='5' name="Clarity" id="Greenradio5" class="css-checkbox" /><label id="Greenradio5" for="Greenradio5" class="css-label"></label>
</div>
</div>
<br><br>
<!-------    Helpfulness   ------>
<div class="row">
<div class="col-md-2" style="color:#f9a765"> التعاون  </div>
<div class="col-md-8 ol-md-pull-5">
<input type="radio" value='1' name="Helpfulness"  id="Orangeradio1" class="css-checkbox required" /><label  id="Orangeradio1" for="Orangeradio1" class="css-label"></label>
<input type="radio" value='2' name="Helpfulness" id="Orangeradio2"  class="css-checkbox" /><label id="Orangeradio2"for="Orangeradio2" class="css-label"></label>
<input type="radio" value='3' name="Helpfulness" id="Orangeradio3" class="css-checkbox" /><label id="Orangeradio3" for="Orangeradio3" class="css-label"></label>
<input type="radio" value='4' name="Helpfulness" id="Orangeradio4" class="css-checkbox" /><label id="Orangeradio4" for="Orangeradio4" class="css-label"></label>
<input type="radio" value='5' name="Helpfulness" id="Orangeradio5" class="css-checkbox" /><label id="Orangeradio5" for="Orangeradio5" class="css-label"></label> 
</div> 
</div>  
<br> <br>
<!-------   Kindness  --->
<div class="row">
<div class="col-md-2" style="color:#e72a71;"> السهولة  </div>
<div class="col-md-8 ol-md-pull-5">
<input  type="radio" value='1' name="Kindness"  id="Redradio1" class=" css-checkbox required" /><label  id="Redradio1" for="Redradio1" class="css-label"></label>
<input type="radio" value='2' name="Kindness"  id="Redradio2" class="css-checkbox" /><label  id="Redradio2" for="Redradio2" class="css-label"></label>
<input type="radio" value='3' name="Kindness"  id="Redradio3" class="css-checkbox" /><label  id="Redradio3" for="Redradio3" class="css-label"></label>
<input type="radio" value= '4' name="Kindness"  id="Redradio4" class="css-checkbox" /><label  id="Redradio4" for="Redradio4" class="css-label"></label>
<input type="radio" value='5' name="Kindness"  id="Redradio5" class="css-checkbox" /><label  id="Redradio5" for="Redradio5" class="css-label"></label>
    </div>
    </div>
    <br>
      <input class="submitRating" style="overflow:auto;" type="submit" value="ارسل">
     </form>

javascript:

$("#ratingform").validate();

I also tried to write the rules like this

 $("#ratingform").validate({
 rules: {
 // simple rule, converted to {required:true}
 Helpfulness: "required",
 // compound rule

 }
 });

any help will be appreciated

Edit:

I figured the problem .. it is from the css because I added display:none; to the radiobutton to style it my way ,and the validation doesn't work if the element is hidden or display is none

Answer 1

Quote OP:

"I added display:none; to the radiobutton to style it my way ,and the validation doesn't work if the element is hidden or display is none"

If that's the case, enable validation on hidden elements using the ignore option.

$("#ratingform").validate({
    ignore: []  // sets the option to ignore nothing.  Hidden elements will be validated
});

DEMO: http://jsfiddle.net/3tLq4/2/