title: page redirect after success bootstrap validation without using php
body: <p>Team,</p>
  <p>I am trying to redirect after success form validation. If it is not success it has to be there in same page if it is success it has to redirect other page</p>
  <p>I have added below line after was class validated code</p>
  <pre><code>$(location).attr('href', 'data.html');
  </code></pre>
  <p>it is redirecting to next page but I am not seeing any error message I am missing some valdiation.</p>
  <p>Here is my entire code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  'use strict'
  $('#data_input').on('submit', function (event) {
      if (!event.target.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
  
      }
      $(this).addClass('was-validated')
      $(location).attr('href', 'data.html');
      return true;
  
  });
  $("#resetbtn").on("click", function (event) {
      event.preventDefault();
      $('#data_input')
          .trigger("reset")
          .removeClass('was-validated')
  });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /&gt;
  &lt;form class="requires-validation" id="data_input" method="post" novalidate&gt;
    &lt;div class="form-group row"&gt;
      &lt;div class="col"&gt;
        &lt;label&gt; Name&lt;/label&gt; &lt;input type="text" class="form-control" name="projectName" required&gt;
        &lt;div class="valid-feedback"&gt;Valid.&lt;/div&gt;
        &lt;div class="invalid-feedback"&gt;Please fill out this field.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
        &lt;label&gt;Code&lt;/label&gt; &lt;input type="text" class="form-control" name="projectCode" required&gt;
        &lt;div class="valid-feedback"&gt;Valid.&lt;/div&gt;
        &lt;div class="invalid-feedback"&gt;Please fill out this field.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;div class="col"&gt;
        &lt;label&gt;Number&lt;/label&gt; &lt;input class="form-control" type="text" name="sprintNumber" required&gt;
        &lt;div class="valid-feedback"&gt;Valid.&lt;/div&gt;
        &lt;div class="invalid-feedback"&gt;Please fill out this field.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group row"&gt;
      &lt;div class="col"&gt; &lt;label&gt;Start Date:&lt;/label&gt; &lt;input type="text" class="form-control has-feedback-left" id="fromdate" placeholder="Please Enter Start Date" name="fromdate" required&gt;
        &lt;div class="valid-feedback"&gt;Valid.&lt;/div&gt;
        &lt;div class="invalid-feedback"&gt;Please fill out this field.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt; &lt;label&gt;End Date:&lt;/label&gt; &lt;input type="text" class="form-control has-feedback-left" id="todate" placeholder="Please Enter End Date" name="todate" required&gt;
        &lt;div class="valid-feedback"&gt;Valid.&lt;/div&gt;
        &lt;div class="invalid-feedback"&gt;Please fill out this field.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--&lt;div class="form-group row"&gt;
                      &lt;div class="col"&gt;
                          &lt;label&gt;Total Days&lt;/label&gt; &lt;input type="text" class="form-control has-feedback-left"
                              name="numberdays" id="numberdays" disabled&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;--&gt;
    &lt;br /&gt;
    &lt;button id="submit" type="submit" class="btn btn-primary"&gt;Next&lt;/button&gt;
    &lt;button id="resetbtn" type="button" class="btn btn-secondary"&gt;Clear&lt;/button&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;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"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please let me know what I am doing wrong here</p>