title: Used bootstrap for validating the form ,even there is some validation the form is getting submitted.How should I avoid it
body: <p>I am using the bootstrap 'needs-validation' for checking the validation form. Here when I click the submit button its validating the field and form is also getting submitted. What I want is when the validation fails the form should not get submitted. I found the form validation from (needs validation) from here <a href="https://www.w3schools.com/bootstrap4/bootstrap_forms.asp" rel="nofollow noreferrer">https://www.w3schools.com/bootstrap4/bootstrap_forms.asp</a> and I used it in my program.</p>
  
  <p>My script is</p>
  
  <pre><code>&lt;div class="row top-space-30"&gt;
              &lt;form class="needs-validation" novalidate action="" method=""&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label class="col-md-4 col-form-label text-md-right" for="studentname"&gt;Student Name:&lt;/label&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;input id="role" name="studentname" type="text" placeholder="name" class="form-control input-md"
                              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;label class="col-md-4 col-form-label text-md-right" for="department"&gt;Department:&lt;/label&gt;
                      &lt;div class="col-md-8"&gt;
                          &lt;input class="form-control" type="text" id="department"&gt;
                          &lt;input type="hidden" id="TestHidden" value="{{result}}" required&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-6 offset-md-4 top-space-30"&gt;
                      &lt;button type="submit" id="submit"&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;script&gt;
          // Disable form submissions if there are invalid fields
          (function () {
              'use strict';
              window.addEventListener('load', function () {
                  // Get the forms we want to add 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);
          })();
  
          $("#submit").click(function (e) {
              var studentName = $("#role").val();
              var departmentsList = $("#department").val().split(',');
  
              $.ajax({
                  type: 'POST',
                  url: '/students/add',
                  data: {
                      'role': studentName,
                      'departmentslist': JSON.stringify(departmentsList)
                  },
                  success: function (result) {
                      alert("The department has been added");
                      document.location.href = "/department";
                  }
              })
          })
      &lt;/script&gt;
  </code></pre>