Bootstrap: Validation states with form-inline fields? - validation

Question

Is there any way to use Bootstrap's form field validation states/classes (warning, error, info, success) on form-inline fields (without using control-group)?
I'm using Bootstrap, and I have a large form that uses the form-horizontal class for layout. However, there are areas within the form where the fields need to be inline (for example, City/State/Zip). I'm using form-inline for this, which works fine. Here's the basic markup:
<form id="account-form" class="form-horizontal" method="post" action="" novalidate>
<!-- Address -->
<div class="control-group">
<label class="control-label">Address</label>
<div class="controls">
<input type="text" name="address" />
</div>
</div>
<!-- City, State, Zip -->
<div class="control-group">
<label class="control-label">City</label>
<div class="controls form-inline">
<input type="text" name="city" />
<label>State</label>
<input type="text" name="state" />
<label>Zip Code</label>
<input type="text" name="zipcode" />
</div>
</div>
</form>
In my particular situation I need to handle validation manually. Unfortunately, it seems Bootstrap's validation state classes must be applied to the control-group; as you can see in the example above, the control-group in my case contains multiple fields. I tried wrapping individual fields within control-group spans or divs, but control-group does not play nicely at all when used with both a form-inline and form-horizontal together!
Is there a CSS class or other rule I can attach to a field directly (or an otherwise-innocent field wrapper) to apply these styles to individual fields, without having to completely redeclare all the standard bootstrap styles??

Answer 1

You could create some custom less code and recompile bootstrap:
Add #import "_custom.less"; to less/bootstrap.less
create less/_custom.less:
// Mixin for inline form field states
.inlineformFieldState(#warning: success,#textColor: #555, #borderColor: #ccc, #backgroundColor: #f5f5f5) {
// Set the text color
label.#{warning},
.help-block .#{warning},
.help-inline .#{warning}{
color: #textColor;
}
// Style inputs accordingly
.checkbox .#{warning},
.radio .#{warning},
input.#{warning},
select.#{warning},
textarea.#{warning} {
color: #textColor;
}
input.#{warning},
select.#{warning},
textarea.#{warning} {
border-color: #borderColor;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(#borderColor, 10%);
#shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(#borderColor, 20%);
.box-shadow(#shadow);
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on .#{warning},
.input-append .add-on .#{warning} {
color: #textColor;
background-color: #backgroundColor;
border-color: #textColor;
}
}
.form-inline{
.inlineformFieldState(success, #successText, #successText, #successBackground);
.inlineformFieldState(warning, #warningText, #warningText, #warningBackground);
.inlineformFieldState(info, #infoText, #infoText, #infoBackground);
.inlineformFieldState(error, #errorText, #errorText, #errorBackground);
}
This mixin is based on .formFieldState in less/mixins.less. After recompile bootstrap you could use (see also: http://jsfiddle.net/bassjobsen/K3RE3/):
<form>
<div class="container">
<div class="control-group">
<div class="controls form-inline">
<label class="error">City</label>
<input class="error" type="text" name="city" />
<label class="warning">State</label>
<input class="warning" type="text" name="state" />
<label class="success">Zip Code</label>
<input class="success" type="text" name="zipcode" />
<label class="info">Street</label>
<input class="info" type="text" name="street" />
</div>
</div>
</div>
</form>

Answer 2

I do this, remove control-group from div container and use form-group instead, but put this in each input div, I do not secure that works with control-group.
This url maybe can help you http://formvalidation.io/examples/complex-form/, this not work for me ^_^!.I hope help you.
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4 form-group" >
<select class="form-control" name="pais">
<option value="" selected disabled>Pais</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="col-lg-4 form-group" >
<select class="form-control" name="estado">
<option value="" selected disabled>Estado</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="">C</option>
</select>
</div>
<div class="col-lg-4 form-group">
<select class="form-control" name="ciudad">
<option value="" selected disabled>Ciudad</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
</div>

Answer 3

something like this will work.
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
//******** added custom code.
$('input[type="radio"]').closest('.col-sm-9').find('.invalid-feedback').hide();
$('input[type="radio"]:invalid').closest('.col-sm-9').find('.invalid-feedback').show();
}, false);
//******** added custom code.
});
}, false);
})();
</script>
code above is almost of document, added custom code at the end of submit event listener.
#read
https://getbootstrap.com/docs/4.0/components/forms/#validation