Bootstrap v4.4.1 Проверка кнопки переключения - PullRequest
Новая
       59

Bootstrap v4.4.1 Проверка кнопки переключения

0 голосов
/ 16 апреля 2020

Мне очень трудно понять, как показать проверку для кнопок-переключателей Bootstrap v4.4.1. Вот мое модальное демо, просто нажмите на иконку, чтобы работать. Можно ли показать какой-либо тип уведомления, когда кнопка переключения не выбрана, когда пользователь нажимает кнопку «Отправить»? Вот мое текущее демо и код. codepen 

(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
  );
})();
.modal-title-custom {
  text-align: center;
  width: 100%;
  font-size: 1.5rem;
  color: #23527c;
  font-weight: 500;
  margin: 0;
}

.modal-content {
  font-size: 1rem;
}

label {
  margin-bottom: 0;
}

.modal-footer {
  position: relative;
  display: inline;
}

.radioFeedback {
}

[data-toggle="buttons"] > .btn input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-modal {
  float: right;
}

.btn-group {
  width: 100%;
}

.btn-group .btn {
  width: 80%;
}

.btn-primary {
  color: #ffffff;
  background-color: #207ab5;
  border-color: #207ab5;
}

.btn-primary:hover {
  color: #ffffff;
  background-color: #3d9ddc;
  border-color: #3d9ddc;
}

.btn-outline-primary {
  border-color: #207ab5;
  color: #207ab5;
}

.btn-outline-primary:hover {
  background-color: #207ab5;
  border-color: #207ab5;
}

.btn-outline-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: #207ab5;
  border-color: #207ab5;
}

#reportName {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

#reportName span {
  font-size: 1rem;
  font-weight: 500;
}

.form-group {
  margin-bottom: 0;
}
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div id="navigation">
  </div>
  <div class="container">

    <div class="page-controls">
      <button type="button" class="btn btn-outline-secondary" title="Send Feedback" data-toggle="modal" data-target="#feedbackForm">
        <i class="fa fa-edit fa-lg" aria-hidden="true"></i>
        <span class="sr-only">Send Feedback</span>
      </button>

      <div class="modal fade" id="feedbackForm" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header bg-light">
              <h5 class="modal-title-custom" id="">Send us your feedback!</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <label for="validationMessage">How can we help you <span style="color: red;">*</span></label>
              <form class="needs-validation" novalidate>

                <div class="container">

                  <div class="row" align="center">

                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                      <label class="btn btn-outline-primary" for="Validationoption1">
                        <input type="radio" name="suggestion" id="Validationoption1" required>Suggestion
                      </label>
                      <label class="btn btn-outline-primary" for="Validationoption2">
                        <input type="radio" name="bugreport" id="Validationoption2" required>Bug Report
                      </label>
                      <label class="btn btn-outline-primary" for="Validationoption3">
                        <input type="radio" name="question" id="Validationoption3" required>Have a Question
                      </label>
                    </div>
                    <div class="invalid-feedback">
                      Please select one.
                    </div>
                  </div>
                </div>

                <div id="reportName">Report Title: <span>Priority Mail Express Daily Failures</span></div>

                <div class="form-group">
                  <label for="validationMessage">Message <span style="color: red;">*</span></label>
                  <textarea class="form-control" rows="3" id="validationMessage" required placeholder="Type your message here ..."></textarea>
                  <div class="invalid-feedback">
                    Please type your message.
                  </div>
                </div>

                <div class="mt-2">
                  <span style="color: red;">*</span><span class="text-muted"> These fields are required.</span>
                  <button type="submit" class="btn btn-primary btn-modal">Submit</button></div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>
...