Q:

JavaScript submits form despite return false statement

I have a python flask webapp and JavaScript front-end. In my front end I am doing all form validations, before submitting it. One such validation is to check the value of a name input field against a list of names(array) I am passing to the template already on GET request. The code below works fine unless it's the last element in the array !!! Then it alerts properly, yet still submits the form. In other words - when rendering the page I am passing the list with all names existing in the database. Then if the same name is provided in the input field, I expect alert and stop execution. In my case, it works fine for all but the last element in the passed array. Then it alerts, yet still submits the form.
My HTML:

function submitServiceForm() {
  if ($('#ingested_product_name').val() == '') {
    alert("you must specify a product name");
    return false;
  } else if ($('#ingested_product_features').val() == '') {
    alert("you must specify at least one feature");
    return false;
  } else if ($('#selected_quality_1').val() == null && !$('#no_qualities').is(':checked')) {
    alert("you must select at least one Quality");
    return false;
  } else if ($('#selected_aspect_1').val() == null && !$('#no_qualities').is(':checked')) {
    alert("you must select at least one Aspect");
    return false;
  } else if ($('#ingesting_service').val() == '') {
    alert("you must select an ingesting service");
    return false;
  } else {
    let no_qa_check = document.getElementById('no_qualities');
    if (no_qa_check.checked) {
      let allIngestInPlatform = {
        {
          allIngestInPlatform | safe
        }
      };
      for (let i = 0; i < allIngestInPlatform.length; i++) {
        if ($('#ingested_product_name').val() == allIngestInPlatform[i]['ingested']) {
          alert("an Ingested Product with the same name already exists on that platform");
          return false;
        } else {
          document.getElementById('ingested_product_form').submit();
        }
      }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <table class="table">
    <tr>
      <td>
        <button type="button" onclick="return submitServiceForm();" class="btn btn-primary">Add Ingested Product</button>
      </td>
    </tr>
  </table>
</div>

A:

Returning false in a submit button click doesn't do anything. A submit button click has a default action of submitting the form. You would need to specifically return false in the onsubmit event instead:
<form .. onsubmit="return submitServiceForm();">

Nowadays people also often prefer to avoid inline Javascript, so with jQuery, that might look more like this:
// Use a more specific selector than this
$('form').on('submit', function(){
    return submitServiceForm();
});

Alternatively if you'd like to keep it in onclick, you can use event.preventDefault() instead.
// use a more specific selector than .btn-primary
$('.btn-primary').click(function(e){
   if(!submitServiceForm()){
     e.preventDefault();
   }
});

