Boa tarde,
Tenho um formulário onde uso para validar o bootstrapValidator. Dependendo da escolha de opções numa selectpicker, ele exibe uma div com vários outros campos. Um desses campos é um outro selectpicker. Quando a div está visível, ele ativa a validação com addField . Quando a div está invisível ele usa o removeField para inserir a validação. Tenho os seguintes códigos:
Primeiro Selectpicker:
<div class="form-group row">
<div class="col-md-3 label-col">
<label class="form-label" for="vnd_produtos">Produtos de interesse</label>
</div>
<div class="validate-group col-sm-5 selectContainer">
<select name="vnd_produtos[]" id="vnd_produtos" class="form-control"
multiple title="Escolha ao menos 1 produto">
<option value="Produto1">Produto1</option>
<option value="Produto2">Produto2</option>
<option value="Produto3">Produto3</option>
<option value="Produto4">Produto4</option>
</select>
</div>
</div>
Caso a opção Produto4 seja a escolhida, vai exibir outros campos. Entre eles está o seguinte selectpicker:
<div class="col-md-3 label-col">
<label class="form-label" for="vnd_opcao">Aluguel ou Compra?</label>
</div>
<div class="validate-group col-sm-4 selectContainer">
<select name="vnd_opcao[]" id="vnd_opcao" class="form-control"
multiple title="Escolha ao menos uma opção">
<option value="Alugar">Alugar</option>
<option value="Comprar">Comprar</option>
</select>
</div>
Uso o seguinte código em JavaScript para validar:
$('#venda')
.find('#vnd_produtos,#vnd_opcao')
.selectpicker()
.change(function(e) {
$('#venda').bootstrapValidator('revalidateField', 'vnd_produtos[]');
if($.inArray("Produto4",$("#vnd_produtos").val())!=-1){
$('#venda').bootstrapValidator('addField',
'vnd_opcao[]',{
callback: function(value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('vnd_opcao').val();
return (options != null && options.length >= 1);
}
});
} else if($.inArray("Produto4",$("#vnd_produtos").val())==-1) {
$("#divSat").hide();
$('#venda').bootstrapValidator('removeField', 'vnd_opcao');
}
})
.end()
.bootstrapValidator({
framework: 'bootstrap',
excluded: 'disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
trigger: 'blur onload',
fields: {
'vnd_produtos[]': {
validators: {
callback: {
message: 'Por favor, escolha ao menos uma opção',
callback: function(value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('vnd_produtos[]').val();
return (options != null && options.length >= 1);
}
}
}
},
'vnd_opcao[]': {
validators: {
callback: {
message: 'Por favor, escolha ao menos uma opção',
callback: function(value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('vnd_opcao[]').val();
return (options != null && options.length >= 1);
}
}
}
}
}
}).on('success.form.bv', function(e) {
$(':submit').attr('disabled', 'disabled');
});
O problema é que ao tentar dar o submit, não é possível enviar pois ele ainda acusa que o campo vnd_opcao está vazio. A remoção da validação não deu certo.
Estou trabalhando com addField e removeField corretamente?
