What steps are required to implement personalized "Group Validation" using Bootstrap Validation?

I recently came across a tutorial on bootstrap validation that caught my eye. It discussed linking email text controls using 

data-validation-matches-match="email"
. Additionally, the tutorial mentioned setting min and max values for a group of checkboxes. Now, imagine I have a group of text boxes within a div named AddressCityCounty, how can I script it so that all controls in this group turn yellow (similar to the email and Quality Control group in the tutorial) until all fields are filled out?

<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>
jquerycssvalidationtwitter-bootstrap

Answer №1

My top recommendation would be to avoid using asp.net controls for this task. While I have used them in the past with twitter bootstrap to varying degrees of success, I find HTML text boxes to be a cleaner alternative. If you are utilizing the .NET framework and require server-side validation, I suggest exploring .NET MVC with Model validation.

To get started, include jsBootstrapValidation in your project and reference twitter bootstrap. Then, follow the guidelines provided on the site. For email validation, simply set your text box as

<input type="email" />

The jsBootstrapValidation plugin will take care of the rest. Keep in mind that achieving this functionality with asp.net controls is not possible.

You can configure your asp.net controls like this:

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

Subsequently, you will need to implement custom jQuery to manage events on text boxes with specific classes. Although this approach may seem cumbersome, its value depends on the level of detail required by the application's specifications.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

javascriptjqueryhtmlcssfade

Vue component always renders a new line

Whenever I include a <component> tag in my main application, it always renders on a new line. Is there a way to make it inline? I am trying to achieve something like this: <p>This is a component :<component></component></p> & ...

htmlcssvue.jsvuejs2vue-component

What is the best way to ensure that all rows in flexbox have the same number and dimensions as the first row?

My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean: If there are 3 sections, the center of the text in each section should be at fifths of the webpage width. This is ...

htmlcssflexbox

Assistance needed with CSS selectors for implementing with selenium

<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div> In relation to selenium, what do the following terms refer to in the above code snippet? attribute element value text label I often fin ...

cssselenium

Hide Rows or Columns automatically in a Table based on the presence of a specific field in a MySQL Database by implementing it

Currently tackling a challenge in my Django project where I need to hide a table row if a specific entity exists in a column in the database. Using a MYSQL database, I am looking to automatically conceal the row without any user interaction. page.html: &l ...

javascripthtmljquerymysqldjango

An extremely basic inquiry regarding JavaScript form validation

Is there a way to add a simple icon next to a form field when users type in their name or email address? I only want the icon to show if even one character is typed. The icon should change based on whether the field has content (success) or not (fail). L ...

javascriptformsvalidation

Place an overlay element in the top-left corner of a perfectly centered image

Currently, there is an image that is centered on the screen using flexbox: .center-flex { display: flex; justify-content: center; } <div class="center-flex"> <img id="revealImage"> </div> An attempt is be ...

javascripthtmlcss

I am encountering issues with my XPath in certain scenarios

When attempting to do an assertion with the total of a dynamic table, I am encountering difficulties writing XPath that works for all scenarios. The issue arises because the table sometimes contains only 1 image and other times it may contain 5 images. In ...

htmlcssseleniumxpath

Stylish mobile navigation styles with CSS

Hey there, I appreciate any help you can provide. I'm having trouble figuring out the right CSS code to modify the colors of my Mobile Menu only... I'd like to change the placeholder text as well as the text and background of the drop-down menu ...

cssmenu

Utilizing Bootstrap for validating a single form field

I have a straightforward form that includes an email field and password field as shown below <Form noValidate validated={validated} onSubmit={this.handleSubmit}> <Form.Group controlId="formEmail"> ...

twitter-bootstrapvalidationbootstrap-4react-bootstrap

What is the best way to unselect a checkbox that is already checked on an HTML page using AngularJS?

I've created checkboxes in my HTML code like this: <div ng-repeat="fruit in fruits"> <input type="checkbox" name="{{fruit.name}} ng-model="fruit.value" ng-checked="isChecked(fruit)" ng-change="changed(fruit)" ng-required="true" ...

javascriptjqueryhtmlangularjscheckbox

Achieving a fixed footer at the bottom with absolute positioning on a webpage

I'm facing an issue with positioning a footer on my webpage, which is made up of div sections that are absolutely positioned. The problem arises because using the bottom property fixes the footer to the bottom of the screen rather than the bottom of t ...

htmlcsscss-positionfootersticky-footer

What is the proper way to send an AJAX request with the data type set to

I am currently working on creating my own POST request. Below is the function I have written: function sendPost(o) { var h = new XMLHttpRequest(); h.onreadystatechange = requestComplete; function requestComplete() { if (h.readyState = ...

javascriptajaxjquery

Why would one assign setTimeout to a variable and is it necessary to then clear it using clearTimeout?

I have been pondering the purpose of assigning setTimeout to a variable like this: scroll_timer = window.setTimeout(function () { ... when I could simply use: window.setTimeout(function () { ... Do you think there is actually a need to clearTimeout in ...

javascriptjquery

Error in Jquery click function not being triggered

I'm in the process of developing an eCommerce platform where users can choose options and have their shopping carts automatically updated using jQuery. Users will be presented with a few radio buttons to select from, and as they make their choice, th ...

javascriptjqueryhtml

Combining input values with predefined defaults

When the user selects the first option in a dropdown menu on my short form, three fields will appear. The first field has a default value while the other two need to be filled out by the user. After that, I need to calculate the total of all three fields. ...

javascriptjqueryhtml

Having difficulty aligning the content to the middle

My goal is to have my calculator centered on the page, but it keeps aligning top left after adding a footer. Any solutions? I'm struggling to figure out how to center my calculator properly with the added footer. Can anyone provide some guidance? ...

htmlcss

Guide on making a half circle within a container or a button aligned with text

I'm struggling with designing a half circle inside a button that is centered inline with the text. Can someone please assist me with this? On this particular scenario, what would be more suitable - using a button element or styling a div to look like ...

htmlcss

Alter the appearance of an alert message to appear on the screen using jQuery

Looking for some help with my calculator project. I'm trying to figure out how to display a number when it's clicked on, but all I can manage so far is an alert popping up. Here's the current code snippet: var add = function (x,y){ retu ...

jquery

Create space adjacent to a div element with CSS styling

Looking to clear a section following a div with the class name "last." Is it possible to achieve this using only CSS? I am unable to directly edit the HTML. Here is the current HTML code: <div class="column">test<br />test</div> <div ...

htmlcss