JQuery验证动态添加规则

Question

我目前正在使用validate插件来验证表单(使用ASP.Net控件).我已经从form.validate方法中的标准设置中删除了规则,即:

    $("form").validate({

    rules: {
        ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0: "required"
    }

});

我现在有各种各样的功能,根据点击的按钮添加ruless.这适用于文本框,但对于RadiobuttonList,当插件尝试添加规则时,会出现错误,指出该元素未定义.

function addRuleSet() {
    $("#ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0").rules("add", { required: true });

}

我认为问题在于我使用name属性(asp puts $ in)来定义单选按钮所属的组而不是id(但在静态设置中,所有元素都使用name属性进行定义.无论如何我不知道如何为一组相关的单选按钮添加规则,任何建议将不胜感激.

PS我真的需要调用RadioButtonList而不是单独的单选按钮.

Answer 1

您还可以通过在元素上设置类来应用规则.例如,如果将"必需"类赋予输入,则所需规则适用于该元素.为此,您将在控件上使用CssClass属性.您可能需要尝试使用复合控件(如RadioButtonList)来确保将类应用于生成的输入元素,而不是容器.如果你遇到这个问题,一种方法是在页面基于选择器加载后使用jQuery添加类.

<asp:RadioButtonList id="RadList" runat="server" CssClass="required">
   ...
</asp:RadioButtonList>

要么

<script type="text/javascript">
     $(function() {
          $(':radio').addClass('required');
          $('form').validate();
     });
</script>

对于复杂的基于类的规则,您可以使用添加新规则addClassRules.

<script type="text/javascript">
    $(function() {
        $.validator.addClassRules({
             range0to10: {
                  range: [0, 10]
             },
             name: {
                  minlength: 2,
                  required: true
             }
        });
        $('form').validate();
    });
</script>

<form ... >
<input type="text" name="rating" id="rating" class="range0to10" />
<input type="text" name="firstName" id="firstName" class="name" />
<input type="text" name="lastName" id="lastName" class="name" />
</form>