3

How do add bootstrap 3 validation states to input groups. The state seems to only apply to the input part of the group.

EDIT 10/02/2014: To clarify, I'm using an input group with a button:

<div class="form-group has-success col-md-3">
  <label class="control-label"></label>
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
    </span>
  </div>
</div>

http://bootply.com/112305

Mike Causer
  • 8,196
  • 2
  • 43
  • 63
Matt Whetton
  • 6,616
  • 5
  • 36
  • 57

2 Answers2

5

The trick is to place the actual input in its own block. Try the following:

<div class="form-group has-feedback">
    <div class="input-group">
        <div style="position:relative"><!-- sub container for the input and validation state -->
            <input name="emailAddress" type="text" class="form-control" value="">
            <span class="glyphicon glyphicon-remove form-control-feedback"><!----></span>
        </div>
        <span class="input-group-btn">
            <button id="button-send" type="submit" class="btn btn-primary">Go!</button>
        </span>
    </div>
</div>
ragamufin
  • 4,113
  • 30
  • 32
0

Wrap it inside a form-group and apply the validation state class to the form-group..

<div class="form-group has-success col-md-3">
  <label class="control-label"></label>
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">00</span>
  </div>
</div>

http://bootply.com/111979

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Sorry, I should have explained better but I'm using an input group with a textbox and a button. I've updated my question above – Matt Whetton Feb 10 '14 at 09:35
  • How would one go about applying the validation class to `form-group`? A lot of use HtmlHelpers present in ASP.NET MVC, and have no control over where that class gets applied! – J86 Mar 20 '15 at 09:18