如何使用引导验证创建自定义“组验证”？

Question

我正在查看 this tutorial 进行引导验证。在本教程中，电子邮件文本控件通过以下方式链接在一起：

data-validation-matches-match="email"

对于复选框组，还有一个 min 和 max 选中值。 我的问题是这样的，假设我有一组文本框，在这个例子中我将主 div 命名为AddressCityCounty：

<div id="AddressCityCounty" style="width:800px;">
<div class="control-group" style="float:left; margin-right:10px;">
    <label class="control-label">Address:
        <asp:RequiredFieldValidator ID="reqAddress" runat="server" ControlToValidate="txtAddress" CssClass="required" EnableClientScript="true" Display="dynamic" SetFocusOnError="true" ErrorMessage="*"/>
    </label>
    <div class="controls">
        <asp:TextBox ID="txtAddress" runat="server" required/>
        <p class="help-block"></p>
    </div>
</div>
<div class="control-group" style="float:left; margin-right:10px;">
    <label class="control-label">City:
        <asp:RequiredFieldValidator ID="reqCity" runat="server" ControlToValidate="txtCity" CssClass="required" EnableClientScript="true" Display="dynamic" SetFocusOnError="true" ErrorMessage="*"/>
    </label>
    <div class="controls">
        <asp:TextBox ID="txtCity" runat="server" required/>
        <p class="help-block"></p>
    </div>
</div>
<div class="control-group" style="float:left;">
    <label class="control-label">County: 
        <asp:RequiredFieldValidator ID="reqCounty" runat="server" ControlToValidate="txtCounty" CssClass="required" EnableClientScript="true" Display="dynamic" SetFocusOnError="true" ErrorMessage="*"/>
    </label>
    <div class="controls">
        <asp:TextBox ID="txtCounty" runat="server" required/>
        <p class="help-block"></p>
    </div>
</div>

如何编写脚本以使控件组变为黄色（就像教程中的电子邮件和质量控制组一样），直到该组中的所有字段都已填写？

Answer 1

首先，我建议您不要使用 asp.net 控件来执行此操作。我过去曾将这些与 twitter bootstrap 一起使用，并取得了不同程度的成功。我会改为使用 HTML 文本框。如果您正在使用 .NET 框架并且需要服务器端验证，我是否还建议使用带有模型验证的 .NET MVC - 更简洁。

首先，您需要将 jsBootstrapValidation 以及对 twitter bootstrap 的引用添加到您的项目中。之后，您想继续并遵循网站上的建议。如果您注意到电子邮件验证所需要的只是将您的文本框设置为

<input type="email" />

jsBootstrapValidation 将完成剩下的工作。但是再一次 - 您将无法使用 asp.net 控件来实现这一点。

您应该能够将您的 asp.net 控件设置为

<asp:Textbox id"emailTextbox" class="email" runat="server" />

之后，您需要提供自定义 jquery 来处理具有特定类的任何文本框上的不同事件，并以这种方式进行。麻烦？绝对地。值得？取决于这是否是一个面向公众的应用程序，他们对这样的东西的需求如何。