Как выполнить проверку формы JS по массиву полей формы? - PullRequest
0 голосов
/ 07 августа 2020

У меня есть форма JS здесь, на JsFiddle .

JS Код:

let submitBtn = null;

$(document).ready(function() {
    const countInput = $('#count');
  
    const addRunBtn = $('#addRunButton');
  const subtractRunBtn = $('#subtractRunButton');
  submitBtn = $('#submitButton');
  
  $('#distance_0').change(function(event) {
    const duration = $('#duration_0').val();
    const distance = event.target.value;
    toggleDistanceError(duration, distance, $('#error_distance_0'));
  });
  
  addRunBtn.click(function() {
    let count = countInput.val();
    
    ++count;
    
    $('#sessions').append(`
    <div id="session_${count}">
        <h4>
        Session ${count+1}
      </h4>
      <div>
        <label>Start Date</label>
        <input type="date" name="feedback[${count}][starttime]" id="starttime_${count}">
      </div>
      <div>
        <label>Duration in sec</label>
        <input type="number" step="1" min="0" name="feedback[${count}][duration]" id="duration_${count}">
      </div>
      <div>
        <label>Distance</label>
        <input type="number" step="0.1" min="0.2" name="feedback[${count}][distance]" id="distance_${count}">
      </div>
      <div>
        <label>Screenshot</label>
        <input type="file" name="feedback[${count}][screenshot]" id="screenshot_${count}">
      </div>
    </div>
    `);
    
    if(count > 0) {
        subtractRunBtn.attr('disabled', false);
    }
    
    if(count >= 9) {
        count = 9;
        addRunBtn.attr('disabled', true);
    }
    
    countInput.val(count);
  });
  
  subtractRunBtn.click(function(event) {
    let count = countInput.val();
    $('#session_' + count).remove();
    --count;
    if(count <= 0) {
        count = 0;
        subtractRunBtn.attr('disabled', true);
    }
    
    if(count < 9) {
        addRunBtn.attr('disabled', false);
    }
    countInput.val(count);
  });
});

function toggleDistanceError(duration, distance, errorDistance) {
    const pace = duration / 60 / distance;
  console.log(pace);
  if (pace <= 2.85) {
    errorDistance.attr('hidden', false);
    submitBtn.attr('disabled', true);
  } else {
    errorDistance.attr('hidden', true);
    submitBtn.attr('disabled', false);
  }
}

Это не полная форма. Просто образец фактической формы, которую я поставил на скрипке JS для демонстрационных целей.

Я хочу иметь возможность проверять поля расстояния по полям продолжительности каждого сеанса. Я хочу рассчитать темп каждого сеанса, и если темп превышает определенное значение, отключите кнопку отправки. Если нет, включите кнопку отправки, чтобы пользователь мог отправить форму.

Мне удалось выполнить проверку для первого сеанса. Как мне добавить проверку в остальные поля? Они добавляются через JavaScript. Это означает, что поля недоступны до тех пор, пока не будет нажата кнопка добавления и поля не созданы.

Дополнительные примечания:

Эта форма является частью заявки Laravel.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...