在Bootstrap 4中显示单选按钮组的无效反馈文本

时间：2017-11-29 06:02:50

标签： twitter-bootstrap validation twitter-bootstrap-4

我正在尝试设置一个Bootstrap 4表单，它将根据custom styles section of the Bootstrap 4 form page显示错误文本。我已逐字地使用了他们自己的部分形式，然后添加了一个广播组，但是当您尝试提交表单时，无法显示广播组的错误文本（“请选择一个选项。”）。

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';

  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  }, false);
})();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>




<form class="container" id="needs-validation" novalidate>
  <div class="row">
     <div class="custom-controls-stacked d-block my-3">
       <label class="custom-control custom-radio">
         <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Toggle this custom radio</span>
       </label>
       <label class="custom-control custom-radio">
         <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Or toggle this other custom radio</span>
       </label>
      <div class="invalid-feedback">
        Please select an option.
      </div>
     </div>
  </div>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

3 个答案:

答案 0 :(得分：2)

这可以在Bootstrap 4中无需额外的JS来完成：

  1. 将单选按钮包装在form-group
    2. 中
  2. 将invalid-feedback包裹在form-check类的最后一个

// 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);
})();
<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">
    <label for="optionA">Make a choice!</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="optionA" required>
      <label class="form-check-label" for="optionA">
                            Option A please
                        </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="optionB" required>
      <label class="form-check-label" for="optionB">
                            Option B please
                        </label>
      <div class="invalid-feedback">
        You need to select either A or B
      </div>
    </div>

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

答案 1 :(得分：2)

我想出了这个解决方案

.invalid-feedback-polyfill {
  display: block !important;
  width: 100% !important;
  margin-top: 0.25rem !important;
  font-size: 80% !important;
  color: #dc3545 !important;
}

答案 2 :(得分：0)

这是我目前的解决方法。我不相信这是最好的方法，因为我使用Javascript来做Bootstrap应该做的事情。

＆＃13;
＆＃13; 
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';

  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      if (!$("input:radio[name='radio-stacked']").is(":checked")) {
        $("#radioStacked2").parent().siblings(".invalid-feedback").css("display", "block");
      } else {
        $("#radioStacked2").parent().siblings(".invalid-feedback").css("display", "none");
      }      
      form.classList.add('was-validated');
    }, false);
  }, false);
  
  $('input[type=radio][name=radio-stacked]').change(function() {
    $("#radioStacked2").parent().siblings(".invalid-feedback").css("display", "none");
  });
  
})();
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>




<form class="container" id="needs-validation" novalidate>
  <div class="row">
     <div class="custom-controls-stacked d-block my-3">
       <label class="custom-control custom-radio">
         <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Toggle this custom radio</span>
       </label>
       <label class="custom-control custom-radio">
         <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Or toggle this other custom radio</span>
       </label>
      <div class="invalid-feedback">
        Please select an option.
      </div>
     </div>
  </div>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题