>

Bootstrap 4 양식 페이지의 사용자 정의 스타일 섹션 . 자체 양식의 일부를 그대로 사용하고 라디오 그룹을 추가했지만 양식을 제출하려고 할 때 라디오 그룹의 오류 텍스트 ( "옵션을 선택하십시오.")가 표시되지 않습니다.

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


  • 답변 # 1

    이 작업은 부트 스트랩 4에서 추가 JS없이 수행 할 수 있습니다.

    <올>

    라디오 버튼을 form-group 로 감 쌉니다.

    와이즈 비즈 랩   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);
    })();
    
    

  • 답변 # 2

    이 솔루션을 생각해 냈습니다

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

  • 답변 # 3

    현재 해결 방법이 있습니다. 부트 스트랩이해야 할 일을하기 위해 Javascript를 사용하고 있기 때문에 이것이 최선의 방법이라고는 생각하지 않습니다.

    .invalid-feedback-polyfill {
      display: block !important;
      width: 100% !important;
      margin-top: 0.25rem !important;
      font-size: 80% !important;
      color: #dc3545 !important;
    }
    
    
    // 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");
      });
      
    })();
    
    

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

관련 자료

  • 이전 경로가있는 컨트롤을 찾을 수 없음, FormArray Angular
  • 다음 python - "typeerror - 지원되지 않는 피연산자 유형 :- 'list'및 'list'