Максим

Смотрите на CodePen
Ответ на ваш вопрос в методе add класса TruckPlanner

Сделал вот так:

computed: {
      isFormValid() {
        return Object.keys(this.fields)
          .every(key => this.fields[key] && this.fields[key].dirty && this.fields[key].valid);
      },
    }

Здесь проверяем, что каждое поле было изменено и проходит валидацию

$('input').trigger('keyup');

Как-то так:

$("#feedback-form").submit(function(event) {
    event.preventDefault();
    var data = new FormData;

    $.each($('[type="file"]').prop('files'), function (k, v) { // Добавляем файлы
        data.append('fileFF[]', files[k]);
    });

    $.each($('form')[0], function (k, v) { // Добавляем все поля, кроме файлов
        var title = $(this).closest('form')[0][k].name;
        if (title != 'files') {
            data.append(title, $('form')[0][k].value);
        }
    });

    $.ajax({
      type: "POST",
      url: "contact.php",
      data: data,
      processData: false,
      contentType: false,
      success: function(msg) {
        if(msg == 'ok') {
          $('.close, .overlay').css('opacity','1');
          $('.close, .overlay').css('visibility','visible');
          $('.close, .overlay').css('display','block');
          $('#page-input').css({'opacity':'0','visibility':'hidden'});
        }
        else {
          $('.close .window').html('<h5>Ошибка</h5><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>');
          $('.close, .overlay').css('opacity','1');
          $('.close, .overlay').css('visibility','visible');
          $('.close, .overlay').css('display','block');
          $('#page-input').css({'opacity':'0','visibility':'hidden'});
        }
      }
    });
    return false;
  });

Проверил, работает. codepen
Стили рабочие? Область изображения доступна для нажатия?

Не `function(Ajax)`, а `function Ajax()`, тогда уж. Но лучше писать имя функции с маленькой буквы.

Почему бы и не псевдоэлементами?.. Они могут брать контент из дата-атрибутов, редактировать будет удобно, вполне нормальное решение.
Я бы сделал в виде иконок с размерами и отступами в em или rem, в адаптиве размеры будут меняться. Полукруги и линии между иконками - border и after, например.

Использовал .select2() под jQuery для такой задачи

Попробовать записывать в search: https://developer.mozilla.org/ru/docs/Web/API/Wind...

С помощью animation + @keyframes.
Ключевыми кадрами будут позиции изображений. Сдвигать изображения нужно на дистанцию равную ширине изображения, первый и последний кадр будут равны.

Из схемы не понятно где эти 600px. Реализовать можно с помощью смены свойства overflow: overflow-y: scroll -> overflow-y: hidden -> overflow-x: scroll и ТД.

Инициировать событие click, может быть?
p.s. можете пояснить смысл этой строки `$( this ).prop( 'disabled', 'disabled' );`

Это возможно, если я правильно понял, что речь идёт о скачивании файла клиентом. Достаточно на сервере кодировать файл в base64 и эту строку отправлять клиенту.

Нужно создать объект FormData, в него копировать содержимое одного file, далее можно этот объект юзать по-своему

Я делал по-другому, работает.
Создаем дочерний body элемент, в нем то, что нужно выводить.

<section class="parentHide" id="parent">
        <div class="feedback">
        </div>
</section>

#parent {
    position: fixed;
    z-index: 100;
}

В вашем случае можно поступить по аналогии, увеличить z-index, но нужно чтобы этот fixed был дочерним body

А стоит ли заморачиваться с базой данных? Если это простой ненагруженный проект, считаю целесообразным пользоваться php_mail(). И тестировать не на локалке, а на хостинге (который и выбрать нужно, чтобы поддерживал почтовый сервис), если это еще не сделано.

Я бы упростил жизнь и сделал на CSS. Используйте свойства transform: translateX(значение_на_которое_поедем) для перемещения и

transition: [что] [за_какое_время] [функция_движения] [задержка]

для плавного перемещения.