formvalidation jquery form group

Question

I am using formvalidation plugin: I have a form-group, inside of it 2 input fields, 1 is being validated one is not. Yet when I click validate a red border is applied to everything in the form-group even though it should not be validated.

Any ideas why?

   <div class="form-group">
    <div class="row">
        <div class="col-xs-4">
           <input type="text" class="form-control" name="phoneNumber" placeholder="Phone" />
        </div>

        <div class="col-xs-4">
           <input type="text" class="form-control" name="rooms" placeholder="# of bedrooms" />
        </div>
    </div>
</div>

http://jsfiddle.net/k281at67/48/

Answer 1

UPDATE

Add this to each object and it works like you wish.

row: '.col-xs-4',

As in

phoneNumber: {
  row: '.col-xs-4', // adding this to each object fixes issue.
  validators: {
    country: 'United States',
    ...

jsFiddle Link