ASP.Net CheckBoxList 的 jQuery 验证

Question

在开始之前，我想声明一下，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>

这个控件会产生以下令人厌恶的 xHTML

<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

Answer 1

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

• http://docs.jquery.com/Plugins/Validation/Validator/addMethod
• http://randomactsofcoding.blogspot.com/2008/10 /starting-with-jquery-how-to-write.html

Answer 2

你有没有尝试过这样的事情：

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

Answer 3

$("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({
//....
});

Answer 4

我在JAVASCRIPT方法上做了一个小小的调整：

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

Answer 5

好吧，我解决了......

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

然后循环数组并检查 attr 是否已检查。如果其中任何一个被设置，则返回为 true。

$.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