如何使用Bootstrap驗證創建自定義「組驗證」？

我在尋找this tutorial的引導驗證。在本教程中的電子郵件文本控件鏈接到一起：如何使用Bootstrap驗證創建自定義「組驗證」？

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>

如何去編寫腳本它使集團的控件變成黃色（就像教程中的電子郵件和質量控制組），直到此組中的所有字段都被填寫完爲止？

來源

2014-01-09 Skullomania

我想知道爲什麼bootstrap需要自己的[驗證插件]（http://jqueryvalidation.org/）？ – Blazemonger

@Blazemonger花俏總是不錯... – Skullomania

@Blazemonger也是我的.NET的驗證已經這樣做 – Skullomania

首先，我會建議你不要使用asp.net控件來做到這一點。在過去，我使用了這些技術，並通過twitter bootstrap獲得了不同程度的成功。我會改用HTML文本框。如果你正在使用.NET框架，並且你需要服務器端驗證，那麼我也可以建議使用Model驗證的.NET MVC--更清潔。

首先，你需要將jsBootstrapValidation與到Twitter的引導引用一起添加到您的項目。之後，您要繼續並按照網站上的建議進行操作。如果您發現所有你需要的電子郵件驗證爲您設置文本框爲

<input type="email" />

的jsBootstrapValidation將做休息。但是，再次 - 你將無法使用asp.net控件來實現這一點。

您應該能夠設置你的asp.net控件

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

在這之後，你將需要提供自定義的jQuery來處理不同的事件上說，與某一類的文本框，並做到這一點的是辦法。繁瑣？絕對。值得？取決於如果這是一個面向公衆的應用程序他們是如何肛門想要這樣的東西。

來源

2014-01-09 19:22:29 Gjohn

我不使用它用於驗證在所有。當用戶填寫表單以獲得更好的用戶體驗時，我使用jquery和css來獲取酷炫的顏色和發光。我測試了我將它放在上面的應用程序，它的工作原理與我添加任何應用程序之前的相同。所以通過大家的評論，我猜測這個功能是不可能的？ – Skullomania

啊，我的壞 - 這可能只是沒有特定的圖書館。我認爲你將不得不修改它才能工作。主要的問題是，一旦你渲染你的asp.net webform，你總是會得到一個，這顯然不符合電子郵件的類型。如果你寫自己的，也許你可以設置它脫離某些類，例如一類電子郵件 - 等等。 – Gjohn

如何使用Bootstrap驗證創建自定義「組驗證」？

回答

相關問題