Question

Bootstrap的新手，我想尝试验证表单。

这是代码：

<form class="needs-validation" novalidate method="post" action="#">
    <div class="form-group">
        <label for="txtDatenaissance">Date de naissance</label>
        <input type="text" class="form-control" id="txtDateNaissance" 
             name="txtDateNaissance" data-provide="datepicker" 
             placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required/>
        <div class="invalid-feedback">
            Date de naissance obligatoire
        </div>
    </div>
    <label for="rdoNon">Etes-vous retraité ?</label>
    <div class="form-group">
        <div class="custom-control custom-control-inline custom-radio">
            <input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1">
            <label class="custom-control-label" for="rdoOui">Oui</label>
        </div>
        <div class="custom-control custom-control-inline custom-radio">
            <input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked">
            <label class="custom-control-label" for="rdoNon">Non</label>
        </div>
    </div>
....
</form>

用于防止在出现某些错误时提交的Javascript代码（来自文档）：

<script type="text/javascript">

(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);
})();

在验证方面效果很好。尽管在显示错误消息时，不再选中单选按钮（默认情况下选中了第二个）...更多，这就像它们已被禁用（不再检查任何一个）

有人知道该怎么办？

ty

Bootstrap验证表单取消选中单选按钮

0 个答案: