Walidator Bootstrap dla wybranych pól

Question

Próbuje wymagać, aby oba rozwijane pola wyboru zawierały wybraną opcję, zanim można włączyć funkcję przesyłania. Czego brakuje, aby wtyczka nie sprawdzała poprawności?

POSTAĆ:

<form role="form" id="bootstrapSelectForm" class="form-horizontal"> 
    <div class="row"> 
    <div class="col-xs-6"> 
    <br> 
     <h5>Region</h5> 
     <select class="form-control" name="region" id="region" > 
        <option value="">Select a Region</option> 
        <option value="US">US</option> 
        <option value="UK">UK</option> 
        <option value="Sales Team">XS (Sales Team)</option> 
        <option value="Editorial Test">XT (Editorial Test)</option> 
     </select> 
    </div> 
    <div class="col-xs-6"> 
    <br> 
     <h5>Duration</h5> 
     <select class="form-control" name="duration" id="duration" > 
        <option value="">Select a Duration</option> 
        <option value="5">5 Minutes</option> 
        <option value="10">10 Minutes</option> 
        <option value="15">15 Minutes</option> 
        <option value="20">20 Minutes</option> 
        <option value="25">25 Minutes</option> 
        <option value="30">30 Minutes</option> 
     </select> 
    </div> 
    <div class="col-xs-6"> 
    <button type="submit" class="btn btn-default" id="submit">Submit</button> 
    </div> 
    </div> 

Bootstrap Validator:

$(document).ready(function() { 
$('#bootstrapSelectForm') 
    .find('[name="region"]') 
     .selectpicker() 
     .submit(function(e) { 
      $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region'); 
     }) 
     .end() 
    .find('[name="duration"]') 
     .selectpicker() 
     .submit(function(e) { 
      $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration'); 
     }) 
     .end() 
    .bootstrapValidator({ 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      region: { 
       validators: { 
        callback: { 
         message: 'Please select region', 

         } 
        } 
       } 
      }, 
      duration: { 
       validators: { 
         message: 'Please select region.' 
       } 
      } 
     } 
    }); 
}); 

Answer 1

Aby BootstrapValidator współpracować z innymi wtyczki, należy przestrzegać dwóch zasad poniżej :

1. Nie wyklucza to pole jeżeli plugin zmienia widoczność pola

Niektóre wtyczki ukryć swoje pole i tworzyć nowe elementy, aby zmienić sposób pole wygląda. Domyślnie ukryte, niewidoczne pola nie zostaną zweryfikowane. Dlatego trzeba ustawić

excluded: ':disabled' 

Zobacz opcję excluded uzyskać więcej informacji.

2. wznawiają ważność pole jeżeli plugin zmienia swoją wartość dynamicznie:

Większość wtyczek wyzwolić zdarzenie po zmianie wartości pola. Korzystając z tego rodzaju programu obsługi zdarzeń, musisz poprosić BootstrapValidator o ponowne potwierdzenie tego pola.

W twoim przypadku, trzeba po prostu wykonaj następujące czynności:

• Dodaj opcję excluded.
• Użyj walidatora notEmpty zamiast walidatora Callback.
• Zamiast używać .submit użyj .change w celu ponownego potwierdzenia pola po zmianie.

patrz kod poniżej:

$('#bootstrapSelectForm') 
    .find('[name="region"]') 
    .selectpicker() 
     .change(function(e) { 
     $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region'); 
     }) 
     .end() 
    .find('[name="duration"]') 
    .selectpicker() 
     .change(function(e) { 
     $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration'); 
     }) 
     .end() 
    .bootstrapValidator({ 
     feedbackIcons: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
     }, 
     excluded: ':disabled', // <=== Add the excluded option 
     fields: { 
     region: { 
      validators: { 
       notEmpty: { // <=== Use notEmpty instead of Callback validator 
        message: 'Please select region' 
       } 
      } 
     } 
     duration: { 
      validators: { 
       notEmpty: { // <=== Use notEmpty instead of Callback validator 
        message: 'Please select region.' 
       } 
      } 
     } 
     } 
    } 
}); 

Zobacz Bootstrap Select przykład, aby uzyskać więcej informacji.