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

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

введите описание изображения здесь

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;
    }
}

Всего 2 ответа


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

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

В противном случае возьмите заполненные значения (от индексов 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 > 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'
  }
  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>


function validate_task() {
        var error_msg = [];

        if($('#CatTask1ID').val() === ""){
          error_msg.push(Ƈ');
        }
        if($('#CatTask2ID').val() === ""){
          error_msg.push(ƈ');
        }
        if($('#CatTask3ID').val() === ""){
          error_msg.push(Ɖ');
        }

        //......

        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"
       }
}

Есть идеи?

10000