Google Chrome "Недопустимый элемент управления формы не фокусируется" с помощью вкладок jQuery

jquery html5 validation google-chrome tabs

3940 просмотра

3 ответа

15145 Репутация автора

Я создал форму, которая разбита на множество «вкладок» с помощью jQuery; и поля, которые находятся на различных вкладках.

Все поля в форме имеют свои проверки, некоторые обязательны, некоторые должны иметь минимальное значение и т. Д.

Однако, когда я пытаюсь отправить форму с недопустимыми значениями в полях, если эти поля находятся на вкладке, отличной от текущей, я получаю сообщение об ошибке на консоли из Google Chrome:

Недопустимый элемент управления формы не может быть сфокусирован

но пользователь не видит эффекта и не может найти неправильное поле, так как оно не было выделено браузером.

Я уже прочитал ответы на следующие вопросы:

Тем не менее, они все говорят, чтобы дать правильное имя для полей (уже сделано) или удалить «обязательный атрибут» (не может этого сделать, это по причине!).

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

Как сохранить проверку HTML5 в форме, одновременно избегая этой ошибки?

РЕДАКТИРОВАТЬ:

Здесь вы можете найти пример того, что я описываю, даже если это намного проще, чем фактическая форма, если вы загрузите ее в Google Chrome и сразу же отправите форму, вы увидите ошибку в своей консоли.

<form id="form_tabs" name="form_tabs" method="post" action="">
  <div id="tabs" class="ui-tabs">
    <ul>
      <li><a rel="tabs" href="#tab1">FIRST TAB</a></li>
      <li><a rel="tabs" href="#tab2">SECOND TAB</a></li>
    </ul>

    <div id="tab1" class="ui-tabs-hide">
      <input type="text" name="text1" id="text1" value="" placeholder="I am NOT required"/>
    </div>

    <div id="tab2" class="ui-tabs-hide">
      <input type="text" name="text2" id="text2" value="" placeholder="I REALLY am required!" required="required"/>
    </div>
  </div>

  <br/>
  <button type="submit" value="submit">
    SEND FORM
  </button>
</form>
Автор: Matteo Tassinari Источник Размещён: 18.07.2016 10:08

Ответы (3)


0 плюса

4021 Репутация автора

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

document.querySelector('#form_tabs').addEventListener('invalid', function(event) {
    // Check event.target, and show its owner tab.  e.g.
    event.target.parentNode.classList.remove('ui-tabs-hide');
}, true);
Автор: int32_t Размещён: 20.07.2016 05:14

0 плюса

1 Репутация автора

У меня была такая же проблема, и я решил ее

$("form input").on("invalid", function() {
    $(this).parents('.parentdiv').find('.div').show()
});

это выведет div с неверными данными и покажет сообщение

Автор: Vilriana Размещён: 25.04.2017 10:28

5 плюса

6696 Репутация автора

Решение

Похоже, это немного похоже на ответ Вилрианы:

//when submitted if there was an issue
 $("form input").on("invalid", function() {
        //find tab id           
        var element = $(this).closest('.ui-tabs-panel').index();
         //goto tab id
        $('#yourTabs').tabs('option', 'active', element)
 });
Автор: Vindicated Halcyon Размещён: 24.06.2017 02:11
Вопросы из категории :
32x32