Проверка радиокнопок с помощью "другого" элемента текстового поля

Question

У меня есть HTML-форма с парой переключателей. Первые несколько - это обычные радиоприемники, но последний связан с текстовым полем. Я хотел бы запустить некоторую проверку JavaScript, чтобы предупредить пользователей, когда они выбирают "другое" без указания значения с помощью текстового поля.

Функциональный HTML + JS приведен ниже, но в общих чертах он выглядит так:

<ul>
    <li>
        <input type="radio"/> foo
    </li>
    <li>
        <input type="radio"/> bar
    </li>
    <li>
        <input type="radio"/> other, please specify:
        <input type="text"/> <span class="error">please provide a value</span>
    </li>
</ul>

У меня есть некоторый JavaScript, чтобы сфокусировать текстовое поле, когда установлен флажок Другое, и наоборот.

Эта проблема

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

Тестовые случаи У меня возникли проблемы с:

1. Предупреждение никогда не должно быть видно в этой последовательности действий:
   1. Начните с выбранной радиосвязи Foo и без текста в текстовом поле.
   2. Уделите фокус текстового поля (например, щелкните по нему); Другое радио проверяется автоматически.
   3. Выберите радио Foo
2. Предупреждение должно быть сначала показано, когда я выполняю шаг 3:
   1. Начните с выбранной радиосвязи Foo и без текста в текстовом поле.
   2. Уделите фокус текстового поля (например, щелкните по нему); Другое радио проверяется автоматически.
   3. Не вводите текстовое поле и продолжайте с остальной частью формы (т.е. сосредоточьтесь на чем-то другом).

Вещи, которые я пробовал

1. Подтверждение события размытия (или изменения) текстового поля. предупреждение появляется в случае 1, шаг 3. Это происходит потому, что размытие происходит до того, как радиоприемник Foo становится выбранным.

2. Проверка на событие размытия ul: у него его нет.

3. В событии размытия текстового поля добавьте обработчик для события mouseup документа. При наведении мыши подтвердите и удалите обработчик. Это работает, когда потеря фокуса в случае 2, шаг 3, вызвана щелчком мыши в другом месте. Это не работает, когда потеря фокуса вызвана клавиатурой или вкладками вдали от окна. Или когда несколько щелчков мыши перекрываются во времени. Исправление этих проблем, похоже, усложнит ситуацию.

4. Обработка размытия текстового поля и использование setInterval вызвать валидацию. Я не могу найти хорошее значение для задержки; слишком короткое означает, что медленный щелчок мыши вызывает мерцание, а слишком длинное означает, что проверка кажется не связанной с действием, вызвавшим размытие.

Answer 1

Как насчет использования события onmouseout в содержащем li для другого параметра? Проблема, связанная с использованием этого события, заключается в том, что когда у вас есть вложенные элементы и вы добавляете обработчик события onmouseout к родительскому элементу, браузеры инициируют событие onmouseout, когда указатель мыши наведет курсор на его дочерние элементы, но существуют сценарии для решения подобных проблем.