1
votes

style des boutons radio bootstrap pour ressembler à des boutons normaux avec validation de formulaire

J'ai ces deux boutons radio qui obligent l'utilisateur à sélectionner l'un des deux boutons radio. J'ai essayé de comprendre comment styliser les boutons radio pour qu'ils ressemblent davantage à des boutons normaux. Comment puis-je personnaliser ces boutons radio pour qu'ils ressemblent à des boutons normaux tout en conservant le comportement du bouton radio et la validation du formulaire?

J'utilise également le bootstrap pour la plupart de mes styles au cas où cela ne serait pas clair.

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<form class="needs-validation" novalidate>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="save" required>
      <label class="form-check-label btn btn-outline-primary" for="save">
                            save
                        </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="cancel" required>
      <label class="form-check-label btn btn-outline-danger" for="cancel">
                            cancel
                        </label>
      <div class="invalid-feedback">
        select one option
      </div>
    </div>

  </div>
  <button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button>
</form>

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

javascript jquery html css bootstrap-4

1 commentaires

Voici quelques bonnes idées: stackoverflow.com/questions/16242980/...

3 Réponses :

0
votes

Vous pouvez mettre la radio dans l'étiquette et supprimer l'attribut for , puis vous pouvez utiliser ce css:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<form class="needs-validation" novalidate>
  <div class="form-group">
    <div class="form-check">
      <label class="form-check-label btn btn-outline-primary">
        <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="save" required>
                            save
                        </label>
    </div>
    <div class="form-check">
      <label class="form-check-label btn btn-outline-danger">
        <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="cancel" required>
                            cancel
                        </label>
      <div class="invalid-feedback">
        select one option
      </div>
    </div>

  </div>
  <button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button>
</form>

La radio fonctionnera toujours comme une radio bouton, il ne sera tout simplement pas visible.

label > [type=radio] { display: none }

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

label > [type=radio] { display: none }

1 commentaires

Cela ne semble pas afficher les commentaires invalides et les boutons ne sont pas remplis lorsque vous cliquez sur le bouton

1
votes

Les choses sont un peu compliquées puisque vous souhaitez conserver le comportement du bouton radio. Si nous masquons simplement les boutons radio ordinaires, l'utilisateur n'a aucun moyen de sélectionner l'un d'entre eux.

Voici donc une solution de contournement compliquée: Tout d'abord, attribuez un identifiant unique aux boutons radio ordinaires et à vos libellés de texte:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<form class="needs-validation" novalidate>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadioA" value="save" required>
      <label class="form-check-label btn btn-outline-primary" for="save" id="saveButton">
                            save
                        </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadioB" value="cancel" required>
      <label class="form-check-label btn btn-outline-danger" for="cancel" id="cancelButton">
                            cancel
                        </label>
      <div class="invalid-feedback">
        select one option
      </div>
    </div>

  </div>
  <button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button>
</form>

Ensuite, masquez les boutons radio ordinaires:

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

document.getElementById("emailConsentRadioB").style.visibility="hidden";
document.getElementById("emailConsentRadioA").style.visibility="hidden";
function cancelPressed(e)
{
document.getElementById("saveButton").className="form-check-label btn btn-outline-primary";
document.getElementById(e.target.id).className="form-check-label btn btn-danger";
document.getElementById("emailConsentRadioB").checked=true;
}
function savePressed(e)
{
document.getElementById("cancelButton").className="form-check-label btn btn-outline-danger";
document.getElementById(e.target.id).className="form-check-label btn btn-primary";
document.getElementById("emailConsentRadioA").checked=true;
}
document.getElementById("saveButton").addEventListener("click",savePressed);
document.getElementById("cancelButton").addEventListener("click",cancelPressed);

Ensuite, ajoutez des écouteurs d'événement clic à vos boutons de style bootstrap pour changer son style en bouton rempli une fois que vous avez cliqué et définissez la propriété cochée du bouton radio normal associé sur cochée. En même temps, faites l'inverse pour l'autre bouton:

function cancelPressed(e)
{
document.getElementById("saveButton").className="form-check-label btn btn-outline-primary";
document.getElementById(e.target.id).className="form-check-label btn btn-danger";
document.getElementById("emailConsentRadioB").checked=true;
}
function savePressed(e)
{
document.getElementById("cancelButton").className="form-check-label btn btn-outline-danger";
document.getElementById(e.target.id).className="form-check-label btn btn-primary";
document.getElementById("emailConsentRadioA").checked=true;
}
document.getElementById("saveButton").addEventListener("click",savePressed);
document.getElementById("cancelButton").addEventListener("click",cancelPressed);

Voici l'exemple complet:

document.getElementById("emailConsentRadioB").style.visibility="hidden";
document.getElementById("emailConsentRadioA").style.visibility="hidden";

<input class="form-check-input" type="radio" name="choice" id="emailConsentRadioA" value="save" required>
<label class="form-check-label btn btn-outline-primary" for="save" id="saveButton">
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadioB" value="cancel" required>
<label class="form-check-label btn btn-outline-danger" for="cancel" id="cancelButton">

0 commentaires

0
votes

il existe une autre façon de résoudre le problème qui n'inclut pas l'écriture de Javascript!

<form class="needs-validation">
 <div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary">
    <input type="radio" name="area" autocomplete="off" value="save">save
  </label>
  <label class="btn btn-outline-danger">
   <input type="radio" name="area" autocomplete="off" value="smoking">cancel
  </label>
 </div>
</form>

Essayez de jouer avec ceci pour ajouter une validation, j'espère que cela vous aidera.

0 commentaires