reset entire form using bootstrap validation

Question

I am trying to create a dashboard using bootstrap form and validation.

I was able to Validate the entire form.

With my current code I was able to reset the value but not the error class

Here is my [code][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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Not sure What I am doing wrong here [1]: https://liveweave.com/dpPcgd

Answer 1

Remove the was-validated

Your script will benefit from using jQuery all the way

If you set the form action the page you want and remove the method="post" to get the default GET method, the page will change when the form is ok

$(function() {
  'use strict'
  $('#data_input').on('submit', function(event) {
    if (!event.target.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }
    $(this).addClass('was-validated'); //inside the else or not
  });
  $("#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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/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" action="https://plungjan.name" 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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>