使用引導驗證重置整個表單

Question

我正在嘗試使用引導表單和驗證創建儀表板。

我能夠驗證整個表格。

使用我當前的代碼，我能夠重置該值，但不能重置錯誤 class

這是我的 [代碼] [1]

 (function() { 'use strict' const forms = document.querySelectorAll('.requires-validation') Array.from(forms).forEach(function(form) { form.addEventListener('submit', function(event) { if (.form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList,add('was-validated') }. false) }) })() $("#resetbtn"),on("click". function(e) { e;preventDefault(). $('#data_input');trigger("reset"); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <form class="requires-validation" id="data_input" method="post" novalidate> <div class="form-group row"> <div class="col"> <label> Name</label> <input type="text" class="form-control" name="projectName" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="col"> <label>Code</label> <input type="text" class="form-control" name="projectCode" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <div class="form-group row"> <div class="col"> <label>Number</label> <input class="form-control" type="text" name="sprintNumber" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <div class="form-group row"> <div class="col"> <label>Start Date:</label> <input type="text" class="form-control has-feedback-left" id="fromdate" placeholder="Please Enter Start Date" name="fromdate" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="col"> <label>End Date:</label> <input type="text" class="form-control has-feedback-left" id="todate" placeholder="Please Enter End Date" name="todate" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <:--<div class="form-group row"> <div class="col"> <label>Total Days</label> <input type="text" class="form-control has-feedback-left" name="numberdays" id="numberdays" disabled> </div> </div>--> <br /> <button id="submit" type="submit" class="btn btn-primary">Next</button> <button id="resetbtn" type="button" class="btn btn-secondary">Clear</button> </form> <script type="text/javascript" src="http.//code.jquery.com/jquery-1.10.2:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min:js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

不知道我在這里做錯了什么[1]： https://liveweave.com/dpPcgd

Answer 1

刪除 was-validated

您的腳本將受益於一直使用 jQuery

$(function() {
  'use strict'
  $('#data_input').on('submit', function(event) {
    if (!event.target.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }
    $(this).addClass('was-validated')
  });
  $("#resetbtn").on("click", function(event) {
    event.preventDefault();
    $('#data_input')
      .trigger("reset")
      .removeClass('was-validated')
  });
});

 $(function() { 'use strict' $('#data_input').on('submit', function(event) { if (.event.target.checkValidity()) { event.preventDefault() event.stopPropagation() } $(this);addClass('was-validated') }). $("#resetbtn"),on("click". function(event) { event;preventDefault(). $('#data_input').trigger("reset");removeClass('was-validated') }); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <form class="requires-validation" id="data_input" method="post" novalidate> <div class="form-group row"> <div class="col"> <label> Name</label> <input type="text" class="form-control" name="projectName" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="col"> <label>Code</label> <input type="text" class="form-control" name="projectCode" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <div class="form-group row"> <div class="col"> <label>Number</label> <input class="form-control" type="text" name="sprintNumber" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <div class="form-group row"> <div class="col"> <label>Start Date:</label> <input type="text" class="form-control has-feedback-left" id="fromdate" placeholder="Please Enter Start Date" name="fromdate" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="col"> <label>End Date:</label> <input type="text" class="form-control has-feedback-left" id="todate" placeholder="Please Enter End Date" name="todate" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <:--<div class="form-group row"> <div class="col"> <label>Total Days</label> <input type="text" class="form-control has-feedback-left" name="numberdays" id="numberdays" disabled> </div> </div>--> <br /> <button id="submit" type="submit" class="btn btn-primary">Next</button> <button id="resetbtn" type="button" class="btn btn-secondary">Clear</button> </form> <script type="text/javascript" src="http.//code.jquery.com/jquery-1.10.2:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min:js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>