Проверка времени начала и окончания при выборе пользователем в JavaScript

Оффтоп javascript
1

Проблема с валидацией времени в форме

У меня есть форма с двумя полями для выбора времени. Нужно проверить, чтобы время начала было меньше времени окончания. Когда начальноеВремя >= финальноеВремя, должно появляться предупреждение.

Вот мой код:

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?

2

Смотри, ты смешиваешь setCustomValidity с alert. Эти методы работают по-разному! setCustomValidity устанавливает кастомное сообщение для валидации формы, а alert просто показывает всплывающее окно. У тебя скобки неправильно стоят - alert внутри setCustomValidity не нужен.

Попробуй так:

if (beginTime.value >= endTime.value) {
    endTime.setCustomValidity("Время окончания не может быть меньше времени начала");
} else {
    endTime.setCustomValidity("");
}

Или если хочешь именно alert, то убери setCustomValidity и оставь только alert(“сообщение”). А проблема с одинаковым временем скорее всего из-за того, что код срабатывает не там где надо - добавь обработчики событий на изменение полей.

3

Уверен, что дело в коде? Может алерт появляется, но сразу исчезает? У меня было то же самое - браузер блокировал повторные алерты. Попробуй console.log вместо alert, посмотри что возвращают поля при одинаковом времени. И когда этот код срабатывает? При отправке формы или когда меняешь поля?

4

Проблема в том, что сравнение строк времени работает не так как ожидаешь. Когда время одинаковое, условие >= должно срабатывать, но возможно есть проблемы с пробелами или форматом. Попробуй добавить проверку на пустые значения и обработчики событий:

beginTime.addEventListener('change', validateTime);
endTime.addEventListener('change', validateTime);

function validateTime() {
    if (beginTime.value && endTime.value && beginTime.value >= endTime.value) {
        alert("Время окончания не может быть меньше времени начала");
    }
}

Так будет проверяться при каждом изменении полей и точно сработает для одинаковых времен.