У меня есть форма 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.