jQuery验证ASP.Net CheckBoxList

时间:2012-02-07 13:07:25

标签: jquery asp.net jquery-validate checkboxlist

在开始之前,我想说明ASP.NET为CheckBoxLists创建的代码可能是我见过的最糟糕的事情。

无论如何,

我正在使用jQuery验证插件来验证我的ASP.net表单。需要验证一些复选框。这些是由CheckBoxList控件生成的。

<asp:CheckBoxList ID="CBContext" runat="server" RepeatColumns="2" 
              DataSourceID="sqlLibraryEnquiries" DataTextField="value" DataValueField="value" name="topic">
</asp:CheckBoxList>

此控件产生以下对xHT​​ML的憎恶

<table id="MainContent_CBContext" name="topic">
    <tr>
        <td>
          <input id="MainContent_CBContext_0" type="checkbox" name="ctl00$MainContent$CBContext$0" value="Business" /><label for="MainContent_CBContext_0">Business</label>
        </td>
        <td>
          <input id="MainContent_CBContext_2" type="checkbox" name="ctl00$MainContent$CBContext$2" value="Legal" /><label for="MainContent_CBContext_2">Legal</label>
        </td>
    </tr>
    <tr>
        <td>
           <input id="MainContent_CBContext_1" type="checkbox" name="ctl00$MainContent$CBContext$1" value="Business Development" /><label for="MainContent_CBContext_1">Business Development</label>
        </td>
        <td>
           <input id="MainContent_CBContext_3" type="checkbox" name="ctl00$MainContent$CBContext$3" value="Library" /><label for="MainContent_CBContext_3">Library</label>
        </td>
    </tr>
</table>

我遇到的问题实际上是将jQuery Validator插件挂钩到复选框列表中。在我的规则部分中,我可以用他们的名字找到所有其他字段 例如ctl00 $ MainContent $ tbActions:但是复选框都有不同的名称。

cb_selectone规则未触发,因为我找不到要验证的对象。 我尝试了以下标识符。 CBContext,ctl00 $ MainContent $ CBContext,MainContent_CBContext和复选框。

$("#Form1").validate({

     rules: {
     //WHAT GOES HERE???? --------->>    CBContext or ctl00$MainContent$CBContext or MainContent_CBContext or checkboxes all don't work: {
            cb_selectone: true
         }
      }
});

感谢您的帮助。

SM

5 个答案:

答案 0 :(得分:3)

我在JAVASCRIPT方法中进行了一些小调整:

$.validator.addMethod('cb_selectone',
    function (value) {
        if ($('[id$=CBContext] input:checked').length > 0) {
            return true;
        }
        else
        {
            return false;
        }
    }, ""
);

答案 1 :(得分:1)

好的,我解决了......

我所做的是创建一个新的验证器方法,该方法获取与MainContent_CBContext的正则表达式匹配的输入类型的所有对象。这将返回所有复选框的数组。

然后循环数组并检查是否检查了attr。如果其中任何一个然后设置返回为真。

$.validator.addMethod('cb_selectone', function (value, element) {
     if (debug) {
         $.jGrowl("Adding Validation");
     }
     var chkGroup = $("input[id^=MainContent_CBContext]");
     if (chkGroup.length > 0) {
         for (var i = 0; i < chkGroup.length; i++) {
             if ($(chkGroup[i]).attr('checked')) {
                 if (debug) {
                    // alert(i + $(chkGroup[i]).val());
                     $.jGrowl("Running loop " + i + " = " + $(chkGroup[i]).val());
                 }
                 return true;
             }
         }
         return false;
     }
     return false;
 }, 'Please select at least one option');

我坚持的部分是找到一个触发addMethod代码的对象。 最后我刚刚使用了......

ctl00$MainContent$CBContext$2: {
   cb_selectone: true
}

这意味着标签放在这个领域的旁边,它纯粹是化妆品。重要的是验证器代码最终绑定到一个真实对象并正确触发。

SM

答案 2 :(得分:0)

列表呈现方式使其变得复杂。我会考虑创建自己的验证方法,并使用根控件的ID,并让验证方法解析内部子项:

答案 3 :(得分:0)

你有没有试过这样的事情:

$("#Form1").validate({
     rules: {
        <%=CBContext.UniqueID %>: {
            cb_selectone: true
         }
      }
});

答案 4 :(得分:0)

$("input:checked") 

是选中器,它会抓取所有选中的复选框

我已经将它用于简单验证,如:

function testChecks() {
    var n = $("input:checked").length;
    if (n > 6) {
        alert("Please select up to six attributes.");
        return false;
    }
    if (n < 1) {
        alert("You must select at least one attribute.");
        return false;
    }
    return true;
}

我想你可以做到

$("input:checked").add("input:not(:checked)").Validate({
//....
});