Альтернатива многим операторам if jquery

Question

Я пытаюсь проверить свою форму, используя jquery перед отправкой. Пользователь должен заполнить Задание соответственно, он не может отправить форму с заполнением Задание 2 и отсутствующим Заданием 1 . А также Task нельзя дублировать с другими Task . Мне интересно, есть ли лучший способ сравнить все это простым способом.

Javascript, в настоящее время я делаю , Все еще не завершено, потому что ищет лучшие пути.

$(function() {
    $( "#create_model" ).submit(function( event ) {
        if(validate_task()){
            alert("Check your task.");
            event.preventDefault();
        } else {
            $("#create_model").submit();
        }
    });
});

function validate_task() {
    if ($('#CatTask2ID').val() !== "" &&  $('#CatTask2ID').val() === "") {
        return "Task 1 is empty"; //return FALSE;
    } else if ($('#CatTask3ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "")  {
        return "Task 1 or 2 is empty"; //return FALSE;
    } else if ($('#CatTask4ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "")  {
        return "Task 1, 2 or 3 is empty"; //return FALSE;
    } else if ($('#CatTask5ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "" || $('#CatTask4ID').val() === "")   {
        return "Task 1, 2 or 3 is empty"; //return FALSE;
    } else if ($('#CatTask5ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "" || $('#CatTask4ID').val() === "")   {
        return "Task 1, 2 or 3 is empty"; //return FALSE;
    } else if ($('#CatTask1ID').val() === $('#CatTask2ID').val() || $('#CatTask1ID').val() === $('#CatTask3ID').val()  .......and others...........  )    {
        return "Duplicates"; //return FALSE;
    }
}

Answer 1

Сначала используйте классы вместо идентификаторов, чтобы вы могли легко получить коллекцию всех выборок, затем сопоставьте каждый выбор с его значением, чтобы получить массив значений.

Найдите индекс первого значения, которое является пустой строкой. Если какие-либо значения после заполнены, верните ошибку, сообщающую, что индекс этой пустой строки пуст.

В противном случае возьмите заполненные значения (от индексов 0 до индекса первая пустая строка) и проверьте, равен ли размер набора этих значений длине массива:

function validate_task() {
  const taskValues = [...$('.tasks')].map(task => task.value);
  const firstEmptyIndex = taskValues.indexOf('');
  if (firstEmptyIndex > 0 && taskValues.slice(firstEmptyIndex).some(val => val)) {
    return `Task ${firstEmptyIndex + 1} is empty`;
  }
  const populatedTasks = taskValues.slice(0, firstEmptyIndex);
  if (populatedTasks.length !== new Set(populatedTasks).size) {
    return 'Duplicates';
  }
  // OK
}

Демонстрационная версия:

document.addEventListener('change', () => console.log(validateTask()));

function validateTask() {
  const taskValues = [...$('.tasks')].map(task => task.value);
  const firstEmptyIndex = taskValues.indexOf('');
  if (firstEmptyIndex !== -1 && taskValues.slice(firstEmptyIndex).some(val => val)) {
    return `Task ${firstEmptyIndex + 1} is empty`;
  }
  const populatedTasks = taskValues.slice(0, firstEmptyIndex);
  if (populatedTasks.length !== new Set(populatedTasks).size) {
    return 'Duplicates';
  }
  return 'OK'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>

Answer 2

function validate_task() {
        var error_msg = [];

        if($('#CatTask1ID').val() === ""){
          error_msg.push('1');
        }
        if($('#CatTask2ID').val() === ""){
          error_msg.push('2');
        }
        if($('#CatTask3ID').val() === ""){
          error_msg.push('3');
        }

        //......

        return error_msg;
}

function validate_task_msg() {
      var arr = validate_task()
       if(arr&& arr.length<=0){
          return true;
       }else if(arr.length == 10){//more
          return "Duplicates";
       }else {
         var msg = arr.join(',');
         return "Task "+ msg + " is empty"
       }
}