Playing with Bootstrap Combobox
← Examples
In this example, you will see how to integrate FormValidation with the Bootstrap Combobox plugin.
You should look at the basic principles when integrating FormValidation with other plugins
<!-- Include Bootstrap Combobox -->
<link rel="stylesheet" href="/vendor/bootstrap-combobox/css/bootstrap-combobox.css">
<script src="/vendor/bootstrap-combobox/js/bootstrap-combobox.js"></script>
<style type="text/css">
/* Adjust feedback icon position */
#productForm .selectContainer .form-control-feedback,
#productForm .inputGroupContainer .form-control-feedback {
right: -15px;
}
</style>
<form id="productForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Product name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea name="description" class="form-control" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Price</label>
<div class="col-xs-3 inputGroupContainer">
<div class="input-group">
<input type="text" class="form-control" name="price" />
<span class="input-group-addon">$</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Size</label>
<div class="col-xs-5 selectContainer">
<select class="form-control" name="size">
<option value="">Choose a size</option>
<option value="s">Small (S)</option>
<option value="m">Medium (M)</option>
<option value="l">Large (L)</option>
<option value="xl">Extra large (XL)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Color</label>
<div class="col-xs-5 selectContainer">
<select class="form-control" name="color">
<option value="">Choose a color</option>
<option value="black">Black</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Add new shirt</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled',
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
}
}
},
description: {
validators: {
notEmpty: {
message: 'The description is required'
},
stringLength: {
min: 50,
max: 1000,
message: 'The description must be more than 50 and less than 1000 characters'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
size: {
validators: {
notEmpty: {
message: 'The size is required'
}
}
},
color: {
validators: {
notEmpty: {
message: 'The color is required'
}
}
}
}
})
/* Using Combobox for color and size select elements */
.find('[name="color"], [name="size"]')
.combobox()
.end()
});
</script>