1

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'
                             }
                         }
                     }        
                 }
            })
});

Aqui esta el enlace al codigo en codepen

1 respuesta 1

1

te hace falta añadir que antes de habilitar el select lo revalide, este ejemplo es funcional en cada cambio

$('#addToCart').find('[name="color"]')
    .selectpicker()
    .change(function(e) {
        /* Revalidate the language when it is changed */
        $('#addToCart').formValidation('revalidateField', 'color');
    })
    .end()
    .formValidation({excluded: ':disabled', ... });

Con esto el comportamiento de tus selects deben ser como deseas, espero te sirva

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.