How to make a select be validated only when the user clicks on a radio button with value = 1 with the formvalidation plugin?

Navigation
0

I have a problem when I use the formvalidation plugin, because it does not matter if I click on the radius with value = 0 or value = 1, it keeps asking me to fill in the select field, but I only want it to do so when value = 1.

HTML 

<form action="" id="Vacante"> <h3 class="page-header">Tipo de vacante</h3>                 <div class="row">
       <div class="col-sm-12">
           <label>Tipo de Vacante</label>
               <br /> 
                 <input type="radio" name="Vacantes_Tipo" id="Vacantes_TipoNo" value="0" checked="checked"> Nueva Vacante <input type="radio" name="Vacantes_Tipo" id="Vacantes_TipoSi" value="1"> Vacante por rotación de personal                                       
<hr />                                                         
<div class="form-group" id="VacanteBaja">                     
<label>Razón de Baja</label>                     
<select class="form-control" name="ddl_Vacantes_Baja" id="ddl_Vacantes_Baja" data-live-search="true">
      <option value="" selected>Selecciona..</option>        
<option value="1">Enfermedad</option>  </select>                               </div>
         </form>

Jquery with FormValidation 

  $(document).ready(function () {
                $('#Vacante')
                 .formValidation({
                     excluded: ':disabled',
                     framework: 'bootstrap',
                     icon: {
                         valid: 'glyphicon glyphicon-ok',
                         invalid: 'glyphicon glyphicon-remove',
                         validating: 'glyphicon glyphicon-refresh'
                     },
                     fields: {
                        Vacantes_Tipo: {
                             validators: {
                                 notEmpty: {
                                     message: 'This field is required'
                                 }
                             }
                         },
                         ddl_Vacantes_Baja: {
                             validators: {
                                 notEmpty: {
                                     message: 'This field is required'
                                 }
                             }
                         },
                                                                  qty: {
                             validators: {
                                 notEmpty: {
                                     message: 'This field is required'
                                 }
                             }
                         }        
                     }
                })
    });

Here's the code in codepen

    
asked by Guillermo Navarro 02.09.2016 в 23:10
source

2 answers

2

According to the documentation, you can make a callback for this type of conditional validation, which is performed each time the radius field value changes: 

  $(document).ready(function () {
            $('#Vacante')
             .formValidation({
                 excluded: ':disabled',
                 framework: 'bootstrap',
                 icon: {
                     valid: 'glyphicon glyphicon-ok',
                     invalid: 'glyphicon glyphicon-remove',
                     validating: 'glyphicon glyphicon-refresh'
                 },
                 fields: {
                    Vacantes_Tipo: {
                         validators: {
                             notEmpty: {
                                 message: 'This field is required'
                             }
                         }
                     },
            ddl_Vacantes_Baja: {
                validators: {
                    callback: {
                        message: 'This field is required',
                        callback: function(value, validator, $field) {
                            var vacantesBaja = $('#Vacante').find('[name="Vacantes_Tipo"]:checked').val();
                            return (vacantesBaja != 1) ? true : (value != '');
                        }
                    }
                }
            } 
                 }
            })
    .on('change', '[name="Vacantes_Tipo"]', function(e) {
        $('#Vacante').formValidation('revalidateField', 'ddl_Vacantes_Baja');
    })
});

You can see more information here: link

    
answered by 03.09.2016 / 00:12
source
0

It occurs to me that you could do the following with the .prop () function of jQuery. Always use the prop method to enable or disable items when you are using jQuery. 

var vacantes = $('#Vacantes_TipoNo');
if (vacantes == 0){
  $('#ddl_Vacantes_Baja').prop("disabled", false); //El elemento estará ahora activado
}


$(document).ready(function(){
  var vacantes = $('#Vacantes_TipoNo');
  
  $('input').click(function(){
    if(vacantes.val() == 0){
     $('#ddl_Vacantes_Baja').prop("disabled", true);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" id="Vacante"> <h3 class="page-header">Tipo de vacante</h3>                 <div class="row">
       <div class="col-sm-12">
           <label>Tipo de Vacante</label>
               <br /> 
                 <input type="radio" name="Vacantes_Tipo" id="Vacantes_TipoNo" value="0" > Nueva Vacante <input type="radio" name="Vacantes_Tipo" id="Vacantes_TipoSi" value="1" checked="checked"> Vacante por rotación de personal                                       
<hr />                                                         
<div class="form-group" id="VacanteBaja">                     
<label>Razón de Baja</label>                     
<select class="form-control" name="ddl_Vacantes_Baja" id="ddl_Vacantes_Baja" data-live-search="true">
      <option value="" selected>Selecciona..</option>        
<option value="1">Enfermedad</option>  </select>                               </div>
         </form>
    
answered by 02.09.2016 в 23:40
SharedPreferences push [closed] Problem with possible macro excel vb [closed]