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

У меня острая проблема на моем сайте. В Google Chrome некоторые клиенты не могут перейти на мою страницу оплаты. При попытке отправить форму я получаю эту ошибку:

An invalid form control with name='' is not focusable.

Это из консоли JavaScript.

Я прочитал, что проблема может быть из-за скрытых полей, имеющих обязательный атрибут. Теперь проблема в том, что мы используем валидаторы обязательных полей .net webforms, а не обязательный атрибут html5.

Кажется случайным, кто получает эту ошибку. Есть кто-нибудь, кто знает решение для этого?

Эта проблема возникает в Chrome, если поле формы не проходит проверку, но из-за того, что соответствующий недействительный элемент управления не может быть сфокусирован, попытка браузера отобразить сообщение «Пожалуйста, заполните это поле» рядом с ним также не удалась.

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

• Поле не имеет значения в соответствии с текущим контекстом бизнес-логики. В таком случае соответствующий элемент управления должен быть удален из DOM или не должен быть помечен requiredатрибутом в этой точке.

• Преждевременная проверка может произойти из-за нажатия пользователем клавиши ВВОД на входе. Или пользователь нажимает на кнопку / элемент управления вводом в форме, которая не определила typeатрибут элемента управления правильно. Если для атрибута типа кнопки не задано значение button, Chrome (или любой другой браузер в этом отношении) выполняет проверку каждый раз, когда нажимается кнопка, поскольку submitэто значение по умолчанию для typeатрибута кнопки .

  Чтобы решить эту проблему, если у вас есть кнопка на странице , что делает что - то другое, кроме отправить или сброса , всегда помните , чтобы сделать это: <button type="button">.

Также см. Https://stackoverflow.com/a/7264966/1356062

Добавление novalidateатрибута в форму поможет:

<form name="myform" novalidate>

В вашем form, вы могли бы скрыть, inputимея requiredатрибут:

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

formНе может сосредоточиться на тех элементах, вы должны удалить requiredиз всех скрытых входов, или реализовать функцию проверки в JavaScript , чтобы справиться с ними , если вы действительно требуете скрытого входа.

В случае, если кто-то еще имеет эту проблему, я испытал то же самое. Как обсуждалось в комментариях, это было связано с попыткой браузера проверить скрытые поля. Он находил пустые поля в форме и пытался сфокусироваться на них, но поскольку они были установлены display:none;, он не мог. Отсюда и ошибка.

Я смог решить это с помощью чего-то похожего на это:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

Кроме того, это, возможно, дубликат «Неверный контроль формы» только в Google Chrome

В моем случае проблема заключалась в том, input type="radio" requiredчто скрывали:

visibility: hidden;

Это сообщение об ошибке также покажет, является ли требуемый тип ввода radioили checkboxимеетdisplay: none; свойство CSS.

Если вы хотите создать пользовательские входы радио / чекбокса, где они должны быть скрыты от пользовательского интерфейса и при этом сохранитьrequired атрибут, вы должны вместо этого использовать:

opacity: 0; Свойство CSS

Ни один из предыдущих ответов не работал для меня, и у меня нет скрытых полей с required атрибутом.

В моем случае проблема была вызвана наличием a <form>и затем a в <fieldset>качестве первого дочернего элемента, который содержит атрибут <input>with required. Удаление <fieldset>решенной проблемы. Или вы можете обернуть свою форму с ним; это разрешено HTML5.

Я на Windows 7 x64, версия Chrome 43.0.2357.130 m.

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

Я нашел это в моей таблице стилей:

input[type="checkbox"] {
    visibility: hidden;
}

Простым исправлением было заменить его следующим:

input[type="checkbox"] {
    opacity: 0;
}

Возможно, у вас есть скрытые (display: none) поля с обязательным атрибутом.

Пожалуйста, проверьте все обязательные поля видны пользователю :)

Для меня это происходит, когда есть <select>поле с предварительно выбранной опцией со значением '':

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

К сожалению, это единственное кросс-браузерное решение для заполнителя ( Как мне создать заполнитель для поля «Выбрать»? ).

Проблема возникает на Chrome 43.0.2357.124.

Если у вас есть поле с обязательным атрибутом, которое не отображается при отправке формы, эта ошибка будет выдана. Вы просто удаляете обязательный атрибут, когда пытаетесь скрыть это поле. Вы можете добавить обязательный атрибут на тот случай, если хотите снова отобразить поле. Таким образом, ваша проверка не будет скомпрометирована и в то же время ошибка не будет выдана.

Для проблемы Select2 Jquery

Проблема в том, что проверка HTML5 не может сфокусировать скрытый недопустимый элемент. Я столкнулся с этой проблемой, когда имел дело с плагином jQuery Select2.

Решение Вы можете внедрить прослушиватель событий и «недопустимое» событие каждого элемента формы, чтобы вы могли манипулировать непосредственно перед событием проверки HTML5.

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

Это сообщение покажет, если у вас есть такой код:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

Да ... Если скрытый элемент управления формы имеет обязательное поле, то он показывает эту ошибку. Одним из решений было бы отключить этот элемент управления формы . Это потому, что, как правило, если вы скрываете элемент управления формы, это потому, что вас не интересует его значение. Таким образом, эта пара значений имени элемента управления формы не будет отправлена ​​при отправке формы.

Вы можете попробовать .removeAttribute("required")те элементы, которые скрыты во время загрузки окна. так как вполне вероятно, что рассматриваемый элемент помечен как скрытый из-за JavaScript (формы с вкладками)

например

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

Это должно сделать задачу.

Это сработало для меня ... ура

Другая возможная причина, которая не покрывается всеми предыдущими ответами, когда у вас есть обычная форма с обязательными полями, и вы отправляете форму, а затем скрываете ее непосредственно после отправки (с использованием javascript), не оставляя времени для работы функции проверки.

Функциональность проверки будет пытаться сфокусироваться на требуемом поле и показать сообщение об ошибке, но поле уже скрыто, поэтому «Недопустимый элемент управления формы с именем = '' не может быть сфокусирован». появляется!

Редактировать:

Для обработки этого случая просто добавьте следующее условие в ваш обработчик отправки

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

Изменить: объяснение

Предполагая, что вы скрываете форму при отправке, этот код гарантирует, что форма / поля не будут скрыты, пока форма не станет действительной. Таким образом, если поле недопустимо, браузер может сосредоточиться на нем без проблем, так как это поле все еще отображается.

Есть вещи, которые все еще меня удивляют ... У меня есть форма с динамическим поведением для двух разных сущностей. Одна сущность требует некоторых полей, а другая нет. Итак, мой JS-код, в зависимости от сущности, выполняет что-то вроде: $ ('# periodo'). RemoveAttr ('required'); $ ( "# Periodo-контейнер") скрыть ().

и когда пользователь выбирает другой объект: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('required', true);

Но иногда при отправке формы возникает проблема: «Недопустимый элемент управления формы с именем = periodo '' не может быть сфокусирован (я использую одно и то же значение для идентификатора и имени).

Чтобы решить эту проблему, вы должны убедиться, что ввод, где вы устанавливаете или удаляете «требуемый», всегда виден.

Итак, что я сделал, это:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

Это решило мою проблему ... невероятно.

В моем случае..

ng-showиспользовался.
ng-ifбыл поставлен на место и исправил мою ошибку.

Для углового использования:

нг-требуется = «логическое»

Это будет применять html5 «обязательный» атрибут, только если значение истинно.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Я пришел сюда, чтобы ответить, что сам вызвал эту проблему, не закрывая </form> тег и имел несколько форм на одной странице. Первая форма будет расширена, чтобы включить поиск подтверждения на входных данных из других источников. Поскольку эти формы скрыты, они вызвали ошибку.

так, например:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

Триггеры

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

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

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

Есть много способов исправить это, как

1. Добавьте novalidate к вашей форме, но это совершенно неправильно, так как это удалит проверку формы, которая приведет к неправильной информации, введенной пользователями.

<form action="...." class="payment-details" method="post" novalidate>

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

   Вместо этого:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

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

   подобно:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

или отключите его через код javascript / jquery в зависимости от вашего сценария.

Я нашел ту же проблему при использовании Angular JS. Это было вызвано использованием требуемого вместе с ng-hide . Когда я нажал кнопку отправки, когда этот элемент был скрыт, произошла ошибка . Недопустимый элемент управления формы с именем = '' не может быть сфокусирован.наконец-то!

Например, использование ng-hide вместе с required:

<input type="text" ng-hide="for some condition" required something >

Я решил это, заменив необходимый вместо этого ng-pattern.

Пример решения:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Для других пользователей AngularJS 1.x эта ошибка возникла из-за того, что я скрывал отображение элемента формы вместо его полного удаления из DOM, когда мне не нужно было завершать элемент управления.

Я исправил это, используя ng-ifвместо ng-show/ng-hide на div, содержащий элемент управления формы, требующий проверки.

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

Позвольте мне изложить мой случай, так как он отличался от всех вышеупомянутых решений. У меня был тег HTML, который не был закрыт правильно. элемент не был required, но он был встроен в hiddendiv

проблема в моем случае заключалась в том type="datetime-local", что, по какой-то причине, проверялось при отправке формы.

я изменил это

<input type="datetime-local" />

в это

<input type="text" />

Я хотел ответить здесь, потому что ни один из этих ответов, или любой другой результат Google не решил проблему для меня.

Для меня это не имело никакого отношения к наборам полей или скрытым вводам.

Я обнаружил, что если бы я использовал max="5"(например), это произвело бы эту ошибку. Если бы я использовал maxlength="5" ... без ошибок.

Я смог воспроизвести ошибку и очистить ошибку несколько раз.

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

В качестве альтернативы другой и надежный ответ заключается в использовании HTML5-атрибута Placeholder, тогда не будет необходимости использовать какие-либо проверки js.

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome не сможет найти пустые, скрытые и необходимые элементы для фокусировки. Простое решение

Надеюсь, это поможет. Я полностью разобрался с этим решением.

Я пришел сюда с той же проблемой. Для меня (вставка скрытых элементов по мере необходимости - т.е. образование в приложении для работы) были необходимые флаги.

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

Мой оригинальный тег ng-required использовал тег видимости (vm.flags.hasHighSchool).

Я решил, создав специальный флаг для установки обязательного ng-required = "vm.flags.highSchoolRequired == true"

Я добавил 10 мс обратного вызова при установке этого флага, и проблема была решена.

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

Html:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

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

Эта ошибка произошла со мной, потому что я отправлял форму с обязательными полями, которые не были заполнены.

Ошибка возникла из-за того, что браузер пытался сфокусироваться на обязательных полях, чтобы предупредить пользователя о том, что поля обязательны для заполнения, но эти обязательные поля были скрыты на экране без div, поэтому браузер не мог сосредоточиться на них. Я отправлял из видимой вкладки, а обязательные поля были в скрытой вкладке, следовательно, ошибка.

Чтобы исправить, убедитесь, что вы контролируете обязательные поля заполнены.

Это потому, что в форме есть скрытый ввод с обязательным атрибутом.

В моем случае у меня было поле выбора, и оно скрыто токенайзером jquery с использованием встроенного стиля. Если я не выбираю токен, браузер выдает вышеуказанную ошибку при отправке формы.

Итак, я исправил это, используя следующую технику CSS:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

Я получил ту же ошибку при клонировании HTML-элемента для использования в форме.

(У меня есть частично полная форма, в которую вставлен шаблон, а затем шаблон изменен)

Ошибка ссылалась на исходное поле, а не на клонированную версию.

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

Чтобы обойти эту проблему, я удалил обязательный атрибут из исходного элемента и динамически добавил его в клонированное поле, прежде чем вводить его в форму. Форма теперь корректно проверяет клонированные и измененные поля.