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?