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

Ok, what's not working? Your code is working fine: jsfiddle.net/3tLq4 — Sparky
– Sparky, Commented Apr 23, 2014 at 15:11
@Sparky that's odd it does not work on my code when I add the class !! code it possibly be the css ??! — proG
– proG, Commented Apr 23, 2014 at 15:17
No, can not be CSS. Are you wrapping in a DOM ready event handler? Are you getting any JavaScript console errors? — Sparky
– Sparky, Commented Apr 23, 2014 at 15:23
@Sparky no JavaScript errors .. however, the other form elements( like options) who their validation works fine when I use the ready event handler it stops working therefor i don't use it — proG
– proG, Commented Apr 23, 2014 at 15:30

Sparky · Accepted Answer · 2014-04-23 16:00:50Z

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/

answered Apr 23, 2014 at 16:00

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related