使用jQuery验证时，我不能使用我的自定义类

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

我想到了问题..它来自css因为我添加了display:none;如果元素被隐藏或显示为none,则无线电按钮以我的方式设置样式

1 个解决方案

#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"

“我将display:none;添加到radiobutton以按照我的方式设置样式,如果元素被隐藏或显示为none,则验证不起作用”

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

如果是这种情况,请使用ignore选项对隐藏元素启用验证。

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

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

#1