Как создать пользовательскую «Групповую проверку» с помощью проверки Bootstrap?

Question

Я смотрел this tutorial на проверке бутстрапа. В учебнике контролирует текст электронной почты связаны друг с другом:

data-validation-matches-match="email" 

Также с группой флажков есть min и max проверяется значение. Мой вопрос заключается в следующем, позволяет сказать, что у меня есть группа текстовых полей, в этом примере я назвал мастер Дивым 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 для обработки различных событий на любом сказать текстовое поле с определенным классом и сделать это, что путь. Громоздкий? Абсолютно. Стоило того? Зависит от того, является ли это публичным приложением, насколько анальным они хотят получить такие вещи.