Проблема с валидацией времени в форме
У меня есть форма с двумя полями для выбора времени. Нужно проверить, чтобы время начала было меньше времени окончания. Когда начальноеВремя >= финальноеВремя
, должно появляться предупреждение.
Вот мой код:
var beginTime = document.getElementById("beginTime");
var endTime = document.getElementById("endTime");
if (beginTime.value >= endTime.value) {
$("#endTime")[0].setCustomValidity(
alert("Время окончания не может быть меньше времени начала")
);
HTML разметка:
<input type="time" id="beginTime" name="begin_time" value="" class="form-control">
<input type="time" id="endTime" name="end_time" value="" class="form-control">
Проблема в том, что когда я выбираю начальноеВремя > финальноеВремя
, предупреждение работает нормально. Но когда времена одинаковые (начальноеВремя = финальноеВремя
), алерт почему-то не появляется.
Не могу понять, в чем может быть проблема. Возможно, дело в формате времени или есть какие-то особенности работы с полями типа time?
Смотри, ты смешиваешь setCustomValidity с alert. Эти методы работают по-разному! setCustomValidity устанавливает кастомное сообщение для валидации формы, а alert просто показывает всплывающее окно. У тебя скобки неправильно стоят - alert внутри setCustomValidity не нужен.
Попробуй так:
if (beginTime.value >= endTime.value) {
endTime.setCustomValidity("Время окончания не может быть меньше времени начала");
} else {
endTime.setCustomValidity("");
}
Или если хочешь именно alert, то убери setCustomValidity и оставь только alert(“сообщение”). А проблема с одинаковым временем скорее всего из-за того, что код срабатывает не там где надо - добавь обработчики событий на изменение полей.
Уверен, что дело в коде? Может алерт появляется, но сразу исчезает? У меня было то же самое - браузер блокировал повторные алерты. Попробуй console.log вместо alert, посмотри что возвращают поля при одинаковом времени. И когда этот код срабатывает? При отправке формы или когда меняешь поля?
Проблема в том, что сравнение строк времени работает не так как ожидаешь. Когда время одинаковое, условие >=
должно срабатывать, но возможно есть проблемы с пробелами или форматом. Попробуй добавить проверку на пустые значения и обработчики событий:
beginTime.addEventListener('change', validateTime);
endTime.addEventListener('change', validateTime);
function validateTime() {
if (beginTime.value && endTime.value && beginTime.value >= endTime.value) {
alert("Время окончания не может быть меньше времени начала");
}
}
Так будет проверяться при каждом изменении полей и точно сработает для одинаковых времен.