Question

我在表单上仅对2个输入文本使用boostrap表单验证（我不想验证单选按钮）。

我的问题是，当在输入文本上显示错误时（需要一个值），它将禁用单选按钮，甚至更改单选按钮文本的颜色。如何避免呢？

这是代码

    <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="required"/>
        <div class="invalid-feedback">
            La date de naissance est obligatoire
        </div>
    </div>
    <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>
    <div id="divMetier" class="form-group d-none">
        <label for="txtMetier">Métier exercé</label>
        <input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
        <div class="invalid-feedback">
            Le métier est obligatoire
        </div>
    </div>

在JS中：

$( document ).ready(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);    
})();

调查之后，所有自定义类似乎都出现了问题，因为如果我使用表单检查类，它会很好地工作（所以普通按钮：它很丑，但它可以工作）。

Answer 1

在这里，我借助form属性将单选和提交按钮放置在表单外部

$(document).ready(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);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<form class="needs-validation" id="formid" novalidate>
  <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="required" />
    <div class="invalid-feedback">
      La date de naissance est obligatoire
    </div>
  </div>
  <div id="divMetier" class="form-group d-none">
    <label for="txtMetier">Métier exercé</label>
    <input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
    <div class="invalid-feedback">
      Le métier est obligatoire
    </div>
  </div>
</form>

<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>

<button class="btn btn-primary" form="formid" type="submit">Submit form</button>

使用自定义类custom-radio-primary

$(document).ready(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);

/* custom-radio-primary escapes validation with primary color */

.custom-radio-primary label {
  color: #212529!important;
}

.custom-radio-primary .custom-control-input:checked~.custom-control-label::before {
  border-color: #007bff!important;
  background-color: #007bff!important;
}

.custom-radio-primary .custom-control-input~.custom-control-label::before {
  border: #adb5bd solid 1px!important;
}

.custom-radio-primary .custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25)!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<form class="needs-validation" id="formid" novalidate>
  <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="required" />
    <div class="invalid-feedback">
      La date de naissance est obligatoire
    </div>
  </div>
  <div class="form-group">
    <div class="custom-control custom-control-inline custom-radio custom-radio-primary">
      <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 custom-radio-primary">
      <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>
  <div id="divMetier" class="form-group d-none">
    <label for="txtMetier">Métier exercé</label>
    <input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
    <div class="invalid-feedback">
      Le métier est obligatoire
    </div>
  </div>

  <button class="btn btn-primary" form="formid" type="submit">Submit form</button>
</form>

引导表单验证禁用我的单选按钮

1 个答案: