Question

我有一个带有单选按钮的表单，我想验证

问题是我已经有了单选按钮的类，因此当我添加所需的类时它不起作用，但是当我删除我的类时它确实有效。

这是代码：

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();

我也尝试过写这样的规则

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

 }
 });

任何帮助将不胜感激

编辑：

我想出了问题..它是来自CSS，因为我补充说显示：无;到radiobutton以我的方式设置它，如果元素被隐藏或者显示为none，则验证不起作用

Answer 1

引用OP：

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

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

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

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

使用jQuery验证时，我无法使用自定义类

1 个答案: