Bootstrap form validation checks all fields within the same form group

Question

I am facing a problem while validating my form.

My html:

<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 conclusion

Now the problem is that I need to display them in a row, so I put them inside the same group from the group, and this creates a problem when checking.

I do not have confirmation for the postal code. But when checking, if any verification of the validation of the city / emirate failed, the postal code is also displayed in red. Which I do not want.

My question is how to display them in a row, as shown in the image, but also save them in a separate group of forms so that the validation does not affect.

Answer 1

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

Reason: the postal code input is highlighted in red if it is not required, and the verification rule is not set, because inside the <div class="form-group required"> , where address_state and address_city are inside the same div , they have a rule check, therefore if any of them is invalid, the .has-error .form-control and selects the postal code tab.

Fiddle is an example where the postal code input is highlighted in red, but a validation rule is not set for it.

Solution : selector , for example row: '.col-xs-12', in the verification rules, so that it overrides the default error class .has-error .form-control and was intended only for input inside <div class="form-group required"> , which has a validation rule set and has an error.

Additional Information

Plugin example

Fiddle custom selector example

 $(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.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script> <script src="https://cdnjs.cloudflare.com/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 need to expand the view of the script on the left or run the above fragment in full screen mode, and they will be exactly like a snapshot.