I am facing a problem while validating my form.

My html is :

<div class="form-group required">
    <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label>
    <div class="col-xs-12 col-sm-9 col-md-9">
        <input type="text" class="form-control" name="address1" id="address1">
        <label for="address1" class="control-label control-label-under">Address 1</label>
    </div> 
</div>

<div class="form-group required">
    <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2">
        <input type="text" class="form-control" name="address_city" id="AddressCity">
        <label class="control-label control-label-under" for="AddressCity">City</label>
    </div>
    <p class="row clearfix  visible-xs-block"></p>
    <div class="col-xs-12 col-sm-3 col-md-3 contact-state">
        <input type="text" class="form-control" name="address_state" id="AddressEmirate">
        <label class="control-label control-label-under" for="AddressEmirate">Emirate</label>
    </div>
    <p class="row clearfix  visible-xs-block"></p>
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="text" class="form-control" name="address_zip" id="AddressPostal">
        <label class="control-label control-label-under" for="AddressPostal"></label>
    </div>
</div>
<hr>

And the output is

Now the problem is as I need to display them inline so I put them inside same from-group and that is creating issue while validation.

I don't have any validation for postal code. But while validating if any of city/emirate validation fails then postal code also shown in red color. Which I don't want.

My question is how to display them inline as shown in the image but also keep them in separate form-group so that validation does not affect.

I am facing a problem while validating my form.

My html is :

<div class="form-group required">
    <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label>
    <div class="col-xs-12 col-sm-9 col-md-9">
        <input type="text" class="form-control" name="address1" id="address1">
        <label for="address1" class="control-label control-label-under">Address 1</label>
    </div> 
</div>

<div class="form-group required">
    <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2">
        <input type="text" class="form-control" name="address_city" id="AddressCity">
        <label class="control-label control-label-under" for="AddressCity">City</label>
    </div>
    <p class="row clearfix  visible-xs-block"></p>
    <div class="col-xs-12 col-sm-3 col-md-3 contact-state">
        <input type="text" class="form-control" name="address_state" id="AddressEmirate">
        <label class="control-label control-label-under" for="AddressEmirate">Emirate</label>
    </div>
    <p class="row clearfix  visible-xs-block"></p>
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="text" class="form-control" name="address_zip" id="AddressPostal">
        <label class="control-label control-label-under" for="AddressPostal"></label>
    </div>
</div>
<hr>

And the output is

Now the problem is as I need to display them inline so I put them inside same from-group and that is creating issue while validation.

I don't have any validation for postal code. But while validating if any of city/emirate validation fails then postal code also shown in red color. Which I don't want.

My question is how to display them inline as shown in the image but also keep them in separate form-group so that validation does not affect.

• javascript
• forms
• twitter-bootstrap
• validation

• is bootstrap now able to validate or you're using an external plugin to do it? – nowhere Commented Oct 5, 2015 at 6:55
• I am using bootstrap form validation plugin. Like this - formvalidation.io/examples/contact-form. Its validating my form but the problem its considering all the fields inside same form group. In my case postal code I don't want to validate and didn't write any validation logic for it. Still when I click save button, postal code also appeared in red color. how to resolve that. – Arjita Mitra Commented Oct 5, 2015 at 6:57
• but in the example from the page you linked here the plugin is initialized via jquery code. Can you paste this code you made in your question? Apparently you should just remove the postcode field from the "fields: {}" object.. – nowhere Commented Oct 5, 2015 at 7:04
• I just said I didn't write any validation logic for postal code inside field: {}. This is happening because my postal code field is inside a mon form-group for city/state/zip and bootstrap validated that group. Can you help me to write up the html. I need to achieve the image result while keeping city/state/postal code inside separate form-group. I am sure that will resolve the issue. – Arjita Mitra Commented Oct 5, 2015 at 7:11
• You need to post a working example of your code (this includes the validation you have written/are using). stackoverflow./help/mcve – vanburen Commented Oct 5, 2015 at 7:14

1 Answer 1

It's not difficult, can be achieved with the same HTML structure

Reason: postal code input highlighted red where it's not required and no validation rule set, because it's inside <div class="form-group required"> where address_state and address_city are inside same div have validation rules set so if any of them invalid, error class .has-error .form-control triggered and highlight the postal code input too.

Fiddle example where postal code input highlighted red but no validation rule set to it.

Solution: set custom error selector e.g row: '.col-xs-12', inside validation rules so it will override the default error class .has-error .form-control and only target the input inside <div class="form-group required"> which has validation rule set and has error.

More Information

Plugin Example

Fiddle example with custom selector

$(document).ready(function () {
    $('#contactForm')
        .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            address_city: {
                row: '.col-xs-12',
                validators: {
                    notEmpty: {
                        message: 'The city is required'
                    }
                }
            },
            address_state: {
                row: '.col-xs-12',
                validators: {
                    notEmpty: {
                        message: 'The State is required'
                    }
                }
            },
            address1: {
                validators: {
                    notEmpty: {
                        message: 'The Address One required'
                    }
                }
            }
        }
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<form id="contactForm" class="form-horizontal">
    <div class="form-group required">
        <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label>
        <div class="col-xs-12 col-sm-9 col-md-9">
            <input type="text" class="form-control" name="address1" id="address1">
        </div>
    </div>
        
    <div class="form-group required">
        <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2">
            <input type="text" class="form-control" name="address_city" id="AddressCity">
            <label class="control-label control-label-under" for="address_city">City</label>
        </div>
            
        <p class="row clearfix  visible-xs-block" form-group required></p>
            
        <div class="col-xs-12 col-sm-3 col-md-3 contact-state">
            <input type="text" class="form-control" name="address_state" id="AddressEmirate">
            <label class="control-label control-label-under" for="address_state">Emirate</label>
        </div>
            
        <p class="row clearfix  visible-xs-block " ></p>
            
        <div class="col-xs-12 col-sm-3 col-md-3">
            <input type="text" class="form-control" name="address_zip" id="AddressPostal">
            <label class="control-label control-label-under"></label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

SideNote: You have to expand the fiddle view to left, or run the above snippet in full page view they will be exactly like snapshot in question.