JQuery validate dynamically add rules

Question

Hi, I am currently using the validate plugin to validate a form (using ASP.Net controls). I have stripped out the rules from the standard setup within the form.validate method ie:

    $("form").validate({

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

});

I now have these in various functions which add the ruless depending on what button is clicked. This works fine for text boxes, but for a RadiobuttonList when the plugin tries to add the rule there is an error saying the element is undefined.

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

}

I think the problem is that I am using the name attribute (asp puts $ in )to define the group that the radio buttons belong to rather than an id (, but in the static settings all the elements are definied using the name attribute. Anyway I am not sure how to get around adding a rule for a group of associated radio buttons, any advice would be appreciated.

PS I really need to call the RadioButtonList rather than the individual radio buttons.

Answer 1

You can also apply a rule by setting classes on the element. For example, if you give the class "required" to an input, then the required rule applies to that element. To do this, you'd use the CssClass property on the control. You may need to experiment with compound controls, like RadioButtonList, to make sure that the class is being applied to the input elements generated, not the container. If you have trouble with this, one way to do it would be to add the class using jQuery after the page loads based on a selector.

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

or

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

For a complex, class-based rule you can add new rules using 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>

Answer 2

After days of this driving me mad, asking the question got me thinking how to get the element returning properly, and I came across this method of referencing staright away which allows me to do it:

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