Question

I’m encountering following problem with the twitter bootstrap framework and jQuery:
I have the following form (simplified, the real form is built with cakephp’s formhelper and has a lot more classes and ids):

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="input01">Name</label>
    <div class="controls">
      <input type="text" class="input-xlarge" id="name">
      <span class="help-block">Supporting help text</span>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="input01">Description</label>
    <div class="controls">
      <input type="text" class="input-xlarge" id="description">
      <span class="help-block">Supporting help text</span>
    </div>
</form>

After server-side validation, i add the .error class to the respective control-group.

now for example the validation for name is ok, but it fails for description, the description control-group gets the error class and is displayed correctly (red, standard bootstrap). but the name input field is red, too. i checked the source code and the name’s control-group has no .error class.
what confuses me, is, that only the input field is display with the red border, the appropriate label tag is displayed correctly (default color).

Here’s a screenshot for clearer understanding.

Check it in Chrome and Firefox, so i can exclude a browser bug. I also added and removed the class manually in chromes developer tool thing and it worked as intended. why is that? does anyone have a solution to this?

Answer 1

The form was inside another div with .control-group-class (not shown here) and the error-class was applied using jQuerys .parents() searching for .control-group which goes all the way up the DOM tree and caused .error to be applied to the div which contained both input fields.

Removing the enclosing divs class solved the problem. This is a bit unfair as I had access to the complete code. 🙁