CODEWITHSUNDEEP
jquerycssvalidationtwitter-bootstrap
Skullomania
Skullomania

Reputation: 2215

How can I create custom "Group Validation" with Bootstrap Validation?

I was looking at this tutorial on bootstrap validation. In the tutorial the email text controls are linked together by:

data-validation-matches-match="email"

Also with the group of checkboxes there is a min and max checked value. My question is this, lets say I have a group of text boxes, in this example I have named the master 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>

How do I go about scripting it so that the group of controls turn yellow (just like the email and Quality Control group from the tutorial) until all fields in this group have been filled out?

Upvotes: 0

Views: 653

Answers (1)

Gjohn
Gjohn

Reputation: 1281

Well first and foremost I would recommend you not use asp.net controls to do this. I have used these in the past with twitter bootstrap with varying degrees of success. I would instead use HTML text boxes. If you are working with the .NET framework and you need server side validation might I also suggest .NET MVC with Model validation - a lot more cleaner.

First off you will need to add the jsBootstrapValidation to your project along with references to twitter bootstrap. After which you want to go ahead and follow the recommendations on the site. If you notice all you need for the email validation is for you to set your text box as 

<input type="email" />

The jsBootstrapValidation will do the rest. But again - you won't be able to achieve this using asp.net controls.

You should be able to setup your asp.net controls as 

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

After which you would need to provide custom jquery to handle the different events on say any text box with a certain class and do it that way. Cumbersome? Absolutely. Worth it? Depends on if this is a public facing app how anal are they about wanting stuff like this.

Upvotes: 1

Related Questions