Tengo un select encadenado que se desabilita por orden jerarquico de los selects y no activa el submit, a menos que todos los select esten llenos.
Todo esta bien ahi, el problema surge cuando agrego el plugin de formvalidation, es mas un error estetico, debido a que quiero que marque error cuando un select este disabled, pero no lo hace, en caso de que llene los tres campos y quite el segundo select, como esta en orden jerarquico, deberia de marcar error con el tercer select, pero no lo hace.
Aqui esta el codigo.
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header">jQuery Chained Select</h1>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<form action="" id="addToCart">
<div class="form-group">
<select name="size" id="size" class="form-control">
<option value="">Size</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="X-Large">X-Large</option>
</select>
</div>
<div class="form-group">
<select name="color" id="color" class="form-control" disabled>
<option value="">Color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
</div>
<div class="form-group">
<select name="qty" id="qty" class="form-control" disabled>
<option value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-default" disabled><i class="glyphicon glyphicon-shopping-cart"></i> Add to Cart</button>
</div>
</form>
</div>
</div>
</div>
Jquery
function chainSelect(current, target){
var value1 = $(current).on('change', function(){
if($(this).find(':selected').val() != '') {
$(target).removeAttr('disabled');
var value = $(this).find(':selected').text();
} else {
$(current).parent().nextAll().find('select, button').prop('disabled', 'disabled').val(null);
}
return value;
});
return value1;
}
size = chainSelect('#size', '#color');
color = chainSelect('#color', '#qty');
qty = chainSelect('#qty', '#submit');
$('#addToCart').submit(function(){
event.preventDefault();
alert('Size: ' + size + '\nColor: ' + color + '\nQuantity: ' + qty);
});
$(document).ready(function () {
$('#addToCart')
.formValidation({
excluded: ':disabled',
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
color: {
validators: {
notEmpty: {
message: 'This field is required'
}
}
},
size: {
validators: {
notEmpty: {
message: 'This field is required'
}
}
},
qty: {
validators: {
notEmpty: {
message: 'This field is required'
}
}
}
}
})
});