JavaScript отправляет форму несмотря на ложное утверждение

Question

У меня есть python flask веб-приложение и JavaScript интерфейс. В своем интерфейсе я делаю все проверки формы, прежде чем отправлять ее. Одной из таких проверок является проверка значения поля ввода имени по списку имен (массив), который я передаю шаблону уже по запросу GET. Код ниже работает нормально, если это не последний элемент в массиве !!! Затем он предупреждает правильно, но все еще отправляет форму. Другими словами - при отображении страницы я передаю список со всеми именами, существующими в базе данных. Затем, если в поле ввода указано то же имя, я ожидаю оповещения и остановлю выполнение. В моем случае это работает нормально для всех, кроме последнего элемента в переданном массиве. Затем он предупреждает, но все еще отправляет форму. Мой 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>

Answer 1

Возврат false при нажатии кнопки подтверждения ничего не делает. Нажатие кнопки «Отправить» имеет действие по умолчанию отправки формы. Вместо этого вам нужно было бы специально возвращать false в событии onsubmit:

<form .. onsubmit="return submitServiceForm();">

В настоящее время люди также часто предпочитают избегать встроенного Javascript, поэтому с jQuery это может выглядеть примерно так:

// Use a more specific selector than this
$('form').on('submit', function(){
    return submitServiceForm();
});

В качестве альтернативы, если вы хотите, чтобы он оставался в нажатом состоянии, вы можете использовать event.preventDefault () .

// use a more specific selector than .btn-primary
$('.btn-primary').click(function(e){
   if(!submitServiceForm()){
     e.preventDefault();
   }
});

Answer 2

Измените эту строку в своем коде с

    for (let i = 0; i < allIngestInPlatform.length; i++)

На

    for (let i = 0; i <= allIngestInPlatform.length; i++)