Есть ли способ определить, является ли ввод времени частично заполненным или пустым?

Question

У меня есть <input type="time">. Chrome позволяет пользователю частично заполнить поля ввода. Например, пользователь вводит часы, но не минуты или наоборот. Можно ли с помощью JavaScript проверить, является ли этот элемент пустым или частично заполнен?

Свойство value пусто, если входные данные заполнены только частично. Так что никто не работает. Есть ли какое-либо свойство, которое можно использовать?

На самом деле меня не интересует частично введенное значение. Просто хотите улучшить взаимодействие с пользователем, предупредив, что время без часа или минуты недопустимо и будет игнорироваться.

JSBin https://jsbin.com/pikabowoyo/edit?html,js,output

let el = document.querySelector('button');
el.addEventListener('click', function() {
  let input = document.querySelector('input');
  console.log(input.value);
});

<input type="time">
<button>show value</button>

Answer 1

Ввод времени недействителен, если частично заполнен. Если вы оставите ввод пустым и нажмете кнопку, вы получите пустое значение. Если вы наполовину заполните данные и нажмете кнопку, они будут помечены как недействительные.

const el = document.querySelector('button');
el.addEventListener('click', function() {
  const input = document.querySelector('input');
  
  const validity = input.checkValidity();
  
  console.log(validity ? input.value : 'partial');
});

.time:invalid {
  border: 1px solid red;
}

<input type="time" class="time">
<button>show value</button>

Answer 2

Это, увы, невозможно. Поле не имеет значения, пока не будет заполнено.

Я не смог найти, где сказано, что клиент ДОЛЖЕН заполнить полное время, прежде чем его можно будет допрашивать

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time https://html.spec.whatwg.org/multipage/input.html#time-state-(type%3Dtime)

Если этодля целей проверки вы можете использовать обязательный, и пользователю не будет разрешено иметь частичный ввод

Если вы не хотите делать это обязательным, для проверки на достоверность вы можете использовать reportValidity или

HTMLFormElement.checkValidity()

Возвращает true, если дочерние элементы управления элемента проходят проверку ограничения и удовлетворяют этим ограничениям;возвращает false, если некоторые элементы управления не удовлетворяют их ограничениям. Вызывает событие с именем invalid на любом элементе управления, который не удовлетворяет его ограничениям;такие элементы управления считаются недействительными, если событие не отменено. Программист должен решить, как реагировать на ложь.