JQuery验证动态添加规则

时间:2009-11-30 12:52:15

标签: asp.net forms jquery-validate

我目前正在使用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(但在静态设置中,所有元素都使用名称定义无论如何我不知道如何为一组相关的单选按钮添加规则,任何建议都将不胜感激。

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

2 个答案:

答案 0 :(得分:9)

您还可以通过在元素上设置类来应用规则。例如,如果将“必需”类赋予输入,则所需规则适用于该元素。为此,您将在控件上使用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>

答案 1 :(得分:1)

经过几天这让我很生气,问这个问题让我想到如何让元素恢复正常,我遇到了这种引用星际的方法,这让我可以做到:

$("input:radio[name='ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0']").rules("add", { required: true });