3
votes

Validation des formulaires Bootstrap et Select2

Explication
J'essaie d'utiliser la validation de formulaire de Bootstrap a > avec les boîtes de sélection de Select2 , mais pour une raison quelconque, cela ne fonctionne pas correctement. Il affiche ce texte de retour, mais pas la couleur de la bordure verte / rouge, comme vous pouvez le voir dans le code ci-dessous.

Codes

Vous pouvez également le voir dans this JSFiddle .

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<form class="was-validated">

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="form-group">
    <select class="select custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

</form>

$(".select").select2({
  minimumResultsForSearch: Infinity
});

Merci d'avance,
Luiz.

javascript html css bootstrap-4 jquery-select2

0 commentaires

4 Réponses :

1
votes

essayez ceci

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<form class="was-validated">

  <div class="form-group">
    <select class="form-control select2" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="form-group">
    <select class="form-control select2" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

</form>

$(".select").select2({
  minimumResultsForSearch: Infinity
});

2 commentaires

Cela ne fonctionne pas car vous n'utilisez pas Select2 :(

Pour le faire fonctionner avec Select2. Je l'ai expliqué dans la question ci-dessus.

6
votes

Vous devez appliquer css pour le remplacement et select2 générer une sélection dynamique pour

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<form class="was-validated">

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="form-group">
    <select class="select custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

</form>

.was-validated .custom-select:invalid + .select2 .select2-selection{
    border-color: #dc3545!important;
}
.was-validated .custom-select:valid + .select2 .select2-selection{
    border-color: #28a745!important;
}
*:focus{
  outline:0px;
}

$(".select").select2({
  minimumResultsForSearch: Infinity
});

.was-validated .custom-select:invalid + .select2 .select2-selection{
    border-color: #dc3545!important;
}
.was-validated .custom-select:valid + .select2 .select2-selection{
    border-color: #28a745!important;
}
*:focus{
  outline:0px;
}

2 commentaires

Wow n'avait aucune idée de ce / comment / pourquoi utiliser le signe + en CSS ... maintenant je sais et quelle excellente façon de l'utiliser.

Légende, m'a sauvé :)

1
votes

J'ai eu le même problème aujourd'hui, et j'ai ajouté des styles de validation à Select2 en utilisant uniquement CSS - un peu comme la réponse de Hiren.

L'avantage de ma réponse est qu'elle applique également le style lorsque vous utilisez le 'is-valid' et les classes «n'est pas valide» (que vous pouvez utiliser lorsque vous avez une validation côté serveur). Mon CSS ajoute également les icônes de coche et de croix pour rester cohérent avec le reste du style de validation Bootstrap.

Ajoutez simplement ce qui suit à votre fichier CSS:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label>Validated Client Side</label>
    <select class="form-control select2" data-placeholder="Select an option" required>
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <div class="invalid-feedback">
      Please select an option.
    </div>
  </div>
  
  <div class="form-group">
    <label>Validated Server Side</label>
    <select class="form-control select2 is-valid" data-placeholder="Select an option" required>
      <option value=""></option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <div class="invalid-feedback">
      Please select an option.
    </div>
  </div>
  
  <button class="btn btn-sm btn-primary" type="submit">Submit</button>
</form>

Voici une démo:

.was-validated select.select2:invalid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-invalid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #fa5c7c;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fa5c7c' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23fa5c7c' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated select.select2:invalid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-invalid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
}
.was-validated select.select2:valid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-valid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #0acf97;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230acf97' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated select.select2:valid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-valid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
}

$('.select2').select2();

$(".needs-validation").on('submit', function (event) {
  $(this).addClass('was-validated');

  if ($(this)[0].checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
    return false;
  } else {
  	alert('form submitted');
    event.preventDefault();
    event.stopPropagation();
    return true;
  };
});

.was-validated select.select2:invalid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-invalid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #fa5c7c;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fa5c7c' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23fa5c7c' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated select.select2:invalid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-invalid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
}
.was-validated select.select2:valid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-valid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #0acf97;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230acf97' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated select.select2:valid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-valid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
}

1 commentaires

Génial! Fonctionne parfaitement. J'ai eu un petit problème avec votre exemple car je n'utilise pas la classe .select2 pour l'initialiser. Ajoutez simplement une astuce obligatoire pour utiliser .select2 car ce code fonctionne sans changement.

0
votes

J'ai emprunté et modifié ce code css à partir de Bootstrap 4 custom-file-input . De cette façon, la validation sur select2 doit se comporter comme sur n'importe quel contrôle de formulaire courant.

.was-validated .ls-select2:valid ~ .select2 .select2-selection, .ls-select2.is-valid ~ .select2 .select2-selection {
    border-color: #4fc47f;
}
.was-validated .ls-select2:valid ~ .select2 .select2-selection::before, .ls-select2.is-valid ~ .select2 .select2-selection::before {
    border-color: inherit;
}
.was-validated .ls-select2:valid ~ .valid-feedback,
.was-validated .ls-select2:valid ~ .valid-tooltip, .ls-select2.is-valid ~ .valid-feedback,
.ls-select2.is-valid ~ .valid-tooltip {
    display: block;
}
.was-validated .ls-select2:valid:focus ~ .select2 .select2-selection, .ls-select2.is-valid:focus ~ .select2 .select2-selection {
    box-shadow: 0 0 0 0.2rem rgba(79, 196, 127, 0.25);
}

.was-validated .ls-select2:invalid ~ .select2 .select2-selection, .ls-select2.is-invalid ~ .select2 .select2-selection {
    border-color: #f35a3d;
}
.was-validated .ls-select2:invalid ~ .select2 .select2-selection::before, .ls-select2.is-invalid ~ .select2 .select2-selection::before {
    border-color: inherit;
}
.was-validated .ls-select2:invalid ~ .invalid-feedback,
.was-validated .ls-select2:invalid ~ .invalid-tooltip, .ls-select2.is-invalid ~ .invalid-feedback,
.ls-select2.is-invalid ~ .invalid-tooltip {
    display: block;
}
.was-validated .ls-select2:invalid:focus ~ .select2 .select2-selection, .ls-select2.is-invalid:focus ~ .select2 .select2-selection {
    box-shadow: 0 0 0 0.2rem rgba(243, 90, 61, 0.25);
}

0 commentaires