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

avatar
mp1990
3 марта 2014 в 13:29
694630
39
830

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

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

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

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

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

Источник
dkasipovic
3 марта 2014 в 13:31
13

Если вы думаете, что это может быть из-за скрытых обязательных полей, возможно, вам стоит проверить, остаются ли в некоторых случаях эти поля пустыми? Например, если вы вводите user_id из сеанса или что-то подобное, в некоторых случаях он может оставаться пустым?

The Vanilla Thrilla
3 марта 2014 в 13:33
1

Согласовано. Откройте консоль разработчика (F12) в Google Chrome и проверьте значения полей, чтобы убедиться, что значения для этих полей пусты.

mp1990
3 марта 2014 в 13:35
0

Спасибо за ваш комментарий. Но для меня это не имеет никакого значения? У меня есть простая форма asp.net, в которой используются элементы управления формой asp.net. Элементы управления вводом создаются платформой.

mp1990
3 марта 2014 в 13:36
0

Я проверил, в полях ввода есть значения. У меня есть одно скрытое поле ввода, которое также имеет значение.

mp1990
3 марта 2014 в 13:38
0

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

Vil
28 декабря 2015 в 22:20
0

Он показывает, есть ли вход без атрибута name. Добавление имени для ввода решило проблему для меня

TexWiller
7 декабря 2019 в 10:27
4

Думаю, такое бывает, когда поле обязательно, но в общем не "видно". Это случилось со мной в форме, разделенной на несколько вкладок, поле, которое вызвало ошибку, находится на вкладке, которая не активна в момент отправки. Я удалил требуемый атрибут из поля и выполнил конкретную проверку

chirag p
27 октября 2021 в 10:53
0

В моем случае required = "" создает ошибку. Снимаю и все работает нормально. Вы должны найти в своем коде необходимое ключевое слово.

rinilnath
23 ноября 2021 в 13:56
0

Привет, в моем случае это связано с недопустимым значением из БД для одной конкретной формы: поля ввода. Есть ли способ отменить проверку только для полей .hide ()?

Ответы (39)

avatar
Igwe Kalu
5 февраля 2015 в 09:38
991

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

Элемент управления формой может быть недоступен во время проверки по нескольким причинам. Наиболее частыми причинами являются два описанных ниже сценария:

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

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

Для решения проблемы, если у вас есть кнопка на вашей странице, которая выполняет что-то еще, кроме , отправьте или <

650> сбросить9346093608 всегда не забывайте делать это: <button type="button">.

См. Также https://coderhelper.com/a/7264966/1356062

graste
7 мая 2015 в 07:53
2

Эта проблема может возникнуть, когда страница создается и тестируется в браузере, который не поддерживает проверку на стороне клиента или не препятствует отправке формы (см. Safari). Следующий разработчик или пользователь с браузером, который фактически предотвращает отправку формы при ошибках на стороне клиента (см. Chrome; даже в скрытых элементах формы), сталкивается с проблемой недоступности формы, так как нельзя отправить форму и не получить никакого сообщения от браузер или сайт. Полное предотвращение проверки с помощью novalidate - неправильный ответ, поскольку проверка на стороне клиента должна поддерживать ввод данных пользователем. Смена веб-сайта - это решение.

fatCop
31 мая 2015 в 11:20
7

Спасибо за подробный ответ. Пропуск required или добавление novalidate никогда не является хорошим решением.

NathofGod
16 июля 2015 в 15:12
0

Хороший ответ. Добавление novalidate сработало для меня, поскольку я использую проверку формы Angular, которая все еще применяется.

Mohammad Kermani
2 августа 2016 в 06:25
0

<button type="button"> было бы полезно, когда мы не хотим проводить проверку, но ваш ответ действительно хорош, и я только что узнал, почему произошла эта ошибка.

Knu
10 августа 2016 в 21:57
0

«Chrome выполняет проверку каждый раз при нажатии кнопки», потому что по умолчанию используется тип submit.

kheit
26 сентября 2016 в 20:23
2

Это должен быть правильный ответ. Если вы используете проверку на стороне клиента html5, добавление novalidate устраняет одну проблему при создании другой. К сожалению, Chrome хочет проверить ввод, который не отображается (и, следовательно, не требуется).

James Scott
6 октября 2016 в 08:10
2

Просто оставив пример в моем случае, было скрытое поле number, где значение по умолчанию не делилось равномерно на размер шага. Изменение размера шага решило проблему.

john
14 апреля 2017 в 03:43
4

@IgweKalu хороший звонок. Я столкнулся с этой реализацией TinyMCE над полем textarea. TinyMCE скрывает исходное поле формы (которое было «обязательным») и вызывает эту ошибку. Решение: удалите скрытый атрибут «required» из формы и используйте другой метод, чтобы убедиться, что он заполнен.

Manveer Singh
2 мая 2017 в 11:08
1

Большое спасибо, ребята, у меня это сработало и сэкономило мое время, используя type = "button".

Lukas
16 марта 2018 в 18:47
0

О, черт возьми, вся эта фраза "требуется удаление" действительно указала на проблему. Недавно я добавил этот элемент, не обращая внимания на то, что он делает, пытаясь устранить другую проблему. Я исправил предыдущую проблему и не подумал о добавленном теге «required», но когда пришло время выполнить фактическую отправку кнопки, хром выдал эту ошибку. Большое спасибо за подробный ответ. Это должен быть приемлемый ответ!

PBo
15 мая 2019 в 14:12
0

Вам не нужно менять кнопку отправки на кнопку, действие javascript onclick (jquery или иное), чтобы эти поля отображались или отображались, избавится от этих сообщений

Monduiz
28 сентября 2019 в 12:34
1

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

71GA
15 января 2020 в 21:21
0

Может ли кто-нибудь объяснить, почему type="button" решает эту проблему?

Igwe Kalu
16 января 2020 в 08:34
1

@ 71GA. Если атрибут type не задан, по умолчанию он имеет значение type='submit'. Следовательно, кнопка может запускать проверку поля до того, как ваше приложение намеревается это сделать.

pradeepcep
25 июня 2020 в 16:16
0

Я обнаружил, что даже несмотря на то, что input не был required, мне нужно было установить его значение на '' до отправки формы. Этот сценарий может возникнуть, если пользователь взаимодействует с вводом / заполняет его до его скрытия. И поскольку у него есть значение, Chrome может попытаться проверить его (я использовал type="number").

kasimir
17 мая 2021 в 18:51
0

Также возможно, что у вас есть несколько button type="submit" в вашей форме / на вашей странице, как и у меня, из-за копирования-вставки.

chirag p
27 октября 2021 в 10:52
0

В моем случае required = "" создает проблему. Снял и работает нормально.

avatar
HoldOffHunger
30 октября 2021 в 18:54
0

Вау, здесь много ответов!

Если проблема <input type="hidden" required="true" />, вы можете решить ее всего за несколько строк.

Логика проста и понятна:

  1. Пометьте каждый требуемый ввод при загрузке страницы с помощью класса data-required.
  2. При отправке выполните две вещи: a) Добавьте required="true" ко всем data-required inputs. b) Remove required = "true" из всех скрытых входов.

HTML

<input type="submit" id="submit-button">

Чистый JavaScript

document.querySelector('input,textarea,select').filter('[required]').classList.add('data-required');

document.querySelector('#submit-button').addEventListener('click', function(event) {
    document.querySelector('.data-required').prop('required', true);
    document.querySelector('input,textarea,select').filter('[required]:hidden').prop('required', false);
    return true;
}

jQuery

$('input,textarea,select').filter('[required]').addClass('data-required');

$('#submit-button').on('click', function(event) {
    $('.data-required').prop('required', true);
    $('input,textarea,select').filter('[required]:hidden').prop('required', false);
    return true;
}
avatar
jimmont
23 октября 2021 в 01:07
0

с пользовательскими элементами, использующими ElementInternals API элемент не может использовать delegatesFocus: true с shadowRoot, потому что элемент должен получать фокус напрямую (в настоящее время это может развиваться) в дереве DOM открытой формы ( родительская форма может находиться в shadowRoot, она просто должна находиться в той же части дерева, что и пользовательские и другие элементы формы); элемент должен быть видимым, и в моем эксперименте для элемента требовалось tabindex=0 (-1, похоже, тоже работает)

демоверсия, расширенная с googlechrome с помощью настраиваемого элемента, находится по адресу https://jimmont.github.io/samples/report-validity/

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

avatar
NaN
13 октября 2021 в 18:16
0

Это происходит со мной, потому что я использую Materialize JS / CSS Framework. Когда я создаю поле <select> в моей форме Материализованная , оно преобразуется в управляемое поле со многими стилизованными полями, а реальное поле <select> скрывается структурой, служа только для доставки выбранного значения на запрос post.

Таким образом, он всегда будет показывать ошибку консоли, если я не использую класс browser-default для отмены управления Materialize над моим полем <select>.

Другой способ - использовать кнопку с type="button" вместо type="submit" и использовать $('form').submit() для отправки формы, но вы потеряете пользовательский интерфейс проверки браузера и вам придется разработать свой собственный или использовать рамки.

avatar
E Demir
3 апреля 2021 в 13:28
0
<input type="submit" name="btnSave" value="Update" id="btnSave" formnovalidate="formnovalidate">

formnovalidate = "formnovalidate"

avatar
Abhinav Kinagi
23 июля 2020 в 09:08
10

Не только поле required , как упоминалось в других ответах. Это также вызвано тем, что помещает поле <input> в скрытое <div>, которое содержит недопустимое значение.

Рассмотрим пример ниже,

<div style="display:none;">
   <input type="number" name="some" min="1" max="50" value="0">
</div> 

Это вызывает ту же ошибку. Поэтому убедитесь, что поля <input> внутри скрытого <div> не содержат недопустимого значения.

MD. Shafayatul Haque
2 сентября 2020 в 15:42
0

Работал у меня. Спасибо

rinilnath
23 ноября 2021 в 13:57
0

Привет, в моем случае это связано с недопустимым значением из БД для одной конкретной формы: поля ввода. Есть ли способ отменить проверку только для полей .hide ()?

avatar
Inc33
22 июня 2020 в 12:52
5

Странно, как все предлагают удалить валидацию, в то время как валидация существует по какой-то причине ... В любом случае, вот что вы можете сделать, если используете настраиваемый элемент управления и хотите поддерживать валидацию:

1-й шаг. Удалите отображение none из входа, чтобы вход стал фокусируемым

.input[required], .textarea[required] {
    display: inline-block !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
}

2-й шаг. Добавить недопустимый обработчик событий на входе для конкретных случаев, если стиля недостаточно

inputEl.addEventListener('invalid', function(e){
   //if it's valid, cancel the event
   if(e.target.value) {
       e.preventDefault();
   }
}); 
northamerican
1 февраля 2021 в 23:19
0

было достаточно замены display:none на position: absolute; opacity: 0; в моем стилизованном вводе. Благодарю.

avatar
Kevin Marmet
13 марта 2019 в 23:31
1

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

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

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

Мне удалось воспроизвести ошибку и очистить ее несколько раз.

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

Ricardo Green
14 августа 2019 в 02:50
0

Мой был решен аналогичным образом, но конфиг был min='-9999999999.99' max='9999999999.99'.

avatar
Kent
28 февраля 2019 в 06:01
1

Я часто видел этот вопрос и сам сталкивался с этой «ошибкой». Были даже ссылки на вопрос, действительно ли это ошибка в Chrome.
Это ответ, который возникает, когда один или несколько элементов типа ввода формы скрыты, и на эти элементы наложен минимальный / максимальный предел (или какое-либо другое ограничение проверки).

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

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

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

NB: Если вы хотите установить для этих значений что-то вне пределов проверки, используйте form.addEventListener ('submit', myFunction), чтобы перехватить событие 'submit' и заполнить эти элементы в "myFunction". Кажется, проверка достоверности выполняется перед вызовом myFunction ().

avatar
SoliQuiD
14 февраля 2019 в 12:47
1

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

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

я изменил это

<input type="datetime-local" />

в этот

<input type="text" />
avatar
deerawan
6 февраля 2019 в 10:40
1

Не только при указании required, у меня также возникала эта проблема при использовании min и max, например,

<input type="number" min="1900" max="2090" />

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

jjonesdesign
19 августа 2020 в 09:48
0

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

avatar
Chareesa Graham
16 августа 2018 в 18:39
3

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

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

Syed Atir Mohiuddin
28 ноября 2018 в 21:41
0

Спас мой день. Спасибо

avatar
J.D. Mallen
17 июля 2018 в 16:41
1

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

Я исправил это, используя ng-if вместо ng-show / / ng-hide <9287609330685>, содержащее элемент управления, содержащий 876093306 >

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

avatar
Khachornchit Songsaen
27 апреля 2018 в 14:55
2

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

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

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

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

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

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
avatar
Gustavo Soler
24 декабря 2017 в 17:26
3

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

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

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

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

Итак, я сделал следующее:

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

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

avatar
Umar Asghar
18 ноября 2017 в 09:12
3

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

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

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

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

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

<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">

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

    как:

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

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

avatar
V H
17 мая 2017 в 17:01
0

Мой сценарий, который, я надеюсь, не пропущен в этом длинном семени ответов, был действительно странным.

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

Короче говоря, идентификаторы div имели

<div id="name${instance.username}"/>

У меня был пользователь: 测试 帐户, и по какой-то причине кодировка произвела странные вещи в мире java-скриптов. Я получил это сообщение об ошибке для формы, работающей в других местах.

Сузил круг вопросов до этого и повторил тест с использованием числовых чисел вместо этого, т.е. id, похоже, решил проблему.

avatar
Gus
25 апреля 2017 в 19:45
24

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

visibility: hidden;

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

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

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

Inzmam ul Hassan
24 июля 2017 в 11:19
0

та же проблема, за исключением того, что я использую библиотеку selectivity.js, которая скрывает текущее поле выбора и показывает альтернативное поле js с js и css. когда я использую required, он выдает эту ошибку form-field.js: 8 create: 1 Недопустимый элемент управления формой с name ='isting_id 'не может быть сфокусирован. cny предложение, как я могу это исправить.

Gus
24 июля 2017 в 20:05
0

@InzmamGujjar, как я понял, ваш js-плагин создает еще один вход select со своими собственными классами. Может быть, изменить классы CSS плагина или выбрать созданный ввод name="" вместо исходного?

colemerrick
21 апреля 2021 в 19:54
0

Полезный ответ. Я бы добавил, если вы хотите сохранить тот же макет / стиль, что и display: none, добавьте position: absolute. Display: none удаляет элемент И пространство, которое он занимает на странице, но visibility: hidden скрывает элемент только визуально.

Reena Verma
28 мая 2021 в 09:06
0

@Gus - Замечательное решение, у меня это сработало!

avatar
ghuroo
7 апреля 2017 в 14:47
8

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

Убедитесь, что все обязательные поля видны пользователю :)

avatar
Frankenmint
21 февраля 2017 в 02:08
2

Я пришел сюда, чтобы ответить, что я сам вызвал эту проблему из-за НЕ закрытия тега </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' не может быть выбран.

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

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

avatar
Mouneer
27 октября 2016 в 16:12
3

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

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

Изменить:

Чтобы обработать этот случай, просто добавьте следующее условие в свой обработчик отправки

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

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

    // Submit and hide form safely
  }

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

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

avatar
AlastairDewar
30 сентября 2016 в 10:46
0

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

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

Ошибка связана с исходным полем, а не с клонированной версией.

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

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

avatar
sudip
10 августа 2016 в 21:54
1

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

В моем случае у меня было поле выбора, и оно было скрыто токенизатором 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;

 }
avatar
Kartik Shenoy
11 июня 2016 в 09:49
3

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

Gabe Kopley
22 августа 2016 в 23:29
1

Спасибо за идею! Мне было полезно переключать ВСЕ иногда скрытые элементы формы, независимо от того, требуются ли отдельные из них или нет, поэтому моя логика приятна и проста :)

avatar
SudarP
18 февраля 2016 в 01:11
9

Для проблемы 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);          
});
avatar
Sam
15 декабря 2015 в 15:52
10

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

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

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

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

input[type="checkbox"] {
    opacity: 0;
}
Rob
1 февраля 2017 в 20:33
0

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

avatar
Nick Taras
7 сентября 2015 в 02:53
2

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

ng-required = "логическое"

Это применит атрибут html5 'required' только в том случае, если значение истинно.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
avatar
maniempire
27 августа 2015 в 17:23
7

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

fWd82
15 марта 2018 в 13:17
0

Подсказка: $("input").attr("required", "true"); или $("input").prop('required',true);, наоборот, вы можете remove атрибут атрибут / свойство . >> jQuery необходимо добавить в поля ввода

avatar
eloone
14 августа 2015 в 13:29
0

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

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

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

avatar
Pere
2 июля 2015 в 22:42
14

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

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

У меня Windows 7 x64, версия Chrome 43.0.2357.130 м.

Ben
23 июля 2015 в 02:29
0

Была такая же проблема, спасибо за подсказку. Удалось решить это с помощью вашего решения, это странно.

fantasticrice
24 июля 2015 в 18:44
0

Спасибо, это было проблемой и в моем случае.

Anja Ishmukhametova
27 июля 2015 в 05:15
0

в моем случае эта подсказка мне поможет

Eric S. Bullington
30 июля 2015 в 14:24
2

Моей проблемой тоже были полевые наборы. В моем случае ответ был найден здесь: coderhelper.com/a/30785150/1002047 Похоже, это ошибка Chrome (поскольку соответствующий HTML-код проверяется с помощью валидатора W3C). Простое изменение моих наборов полей на div решило проблему.

Pere
30 июля 2015 в 17:07
0

@ EricS.Bullington, спасибо, что указали. Я не знал этого ответа; как этот пользователь, я обнаружил, что он сам «нарезает» части моей формы. Кстати, я не знаю о системе нумерации версий Chrome, но с 124 до 130 за 4 года не выглядит большим шагом ...

Native Coder
12 апреля 2017 в 18:38
0

Это моя проблема, но я использую наборы полей для пользовательского интерфейса формы. (Буквально, разделение формы на наборы данных. Например, адрес, личная информация, прочее и т. Д.). Так что вырезание fieldset для меня не вариант. Кто-нибудь знает другое обходное решение?

rinilnath
23 ноября 2021 в 13:56
0

Привет, в моем случае это связано с недопустимым значением из БД для одной конкретной формы: поля ввода. Есть ли способ отменить проверку только для полей .hide ()?

Pere
24 ноября 2021 в 14:24
0

@rinilnath Я думаю, что вам следует проверить значения, которые вы получаете из БД, чтобы заполнить поля и убедиться, что они являются действительным HTML

rinilnath
2 декабря 2021 в 07:54
1

@Pere, я исправил проблему другим способом, ответ «abhinav kinagi» ниже дал ключ к разгадке, были и другие поля, которые прошли валидацию, что в дальнейшем вызывало ту же ошибку (непонятная ошибка). Следовательно, мне пришлось удалить атрибуты проверки во время hide () и добавить их снова во время show () в JQuery.

Pere
2 декабря 2021 в 10:50
0

Подобные ситуации @rinilnath иногда заставляют меня сомневаться в полезности проверки HTML в настоящее время ...

avatar
piotr_cz
16 июня 2015 в 12:26
9

Для меня это происходит, когда есть поле <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.

avatar
Adam Diament
5 мая 2015 в 14:05
0

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

avatar
James Fleming
8 марта 2015 в 18:49
0

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

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

В моем исходном теге 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>
Drachenfels
21 апреля 2015 в 16:53
0

На самом деле ваше решение очень и очень рискованно. Любой, у кого медленный процессор, все равно получит ту же ошибку. Это (или будет) типичное состояние гонки. Возможно, пострадали старые смартфоны. Поэтому будьте осторожны с этим решением.

avatar
utkarshk
26 ноября 2014 в 14:03
0

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

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

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

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

avatar
utkarshk
20 ноября 2014 в 16:35
3

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

например,

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

Это должно выполнить задачу.

У меня это сработало ... ура

avatar
Robert
28 сентября 2014 в 00:22
3

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

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

  <input type="submit"/>
</form>
Robert
28 июня 2015 в 12:18
0

я знаю, что это то же самое, я просто привожу пример, некоторые люди лучше разбираются в кодах: D

avatar
Ankit Sharma
22 апреля 2014 в 09:16
298

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

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

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

David Brunow
30 мая 2014 в 05:20
8

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

Pacerier
27 января 2015 в 06:24
3

Необязательно иметь required. Только pattern может вызвать эту проблему.

Josh Mc
9 февраля 2015 в 01:31
7

В моем случае поля формы не были type = "hidden", они просто были вне поля зрения, например, в форме с вкладками.

Pere
13 мая 2015 в 14:19
0

У меня есть две формы: одна с <input type="hidden" required />, а другая с <input type="text" style="display: none" required />, и единственное, что отображает ошибку в Chrome, - это display: none, а "hidden" отправляется нормально.

superluminary
8 июня 2015 в 09:10
0

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

Anil Vangari
17 февраля 2016 в 16:35
0

В моем случае элемент управления вводом находится внутри div, а div скрыт с помощью ng-show. Мне пришлось удалить обязательный атрибут и исправить правила проверки для скрытого элемента управления. Этот ответ мне определенно помог.

Taha Khan
25 сентября 2021 в 11:52
0

В моем случае это устранило мою проблему.

avatar
Horatio Alderaan
31 марта 2014 в 04:14
39

Если у кого-то еще есть эта проблема, я испытал то же самое. Как обсуждалось в комментариях, это произошло из-за попытки браузера проверить скрытые поля. Он находил пустые поля в форме и пытался сосредоточиться на них, но, поскольку для них было установлено значение 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

Horatio Alderaan
2 июня 2014 в 04:05
7

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

Jonathan DeMarks
27 октября 2014 в 14:58
1

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

Horatio Alderaan
11 ноября 2014 в 23:02
1

Чтобы дать немного контекста, я был как раз в ситуации «работы с устаревшим кодом», когда столкнулся с этой проблемой. Полностью согласен, что это взлом. Намного лучше разработать разметку, чтобы не столкнуться с такой ситуацией. Однако с устаревшими кодовыми базами и негибкими системами CMS это не всегда возможно. Вышеупомянутый подход к отключению вместо использования "novalidate" был лучшим способом, который я мог придумать для решения проблемы.

Marcel Burkhard
8 января 2015 в 13:29
0

У меня это не работает, потому что javascript выдает ошибку перед вызовом функции отправки.

Druckles
4 июня 2015 в 16:38
3

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

lewsid
17 августа 2017 в 01:42
1

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

avatar
user2909164
3 марта 2014 в 13:48
394

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

<form name="myform" novalidate>
mp1990
3 марта 2014 в 14:06
2

Спасибо за ваш комментарий. Но мне интересно, какие риски безопасности будут связаны с этим? Если есть? Или он просто сообщает браузеру не проверять поля ввода внутри формы?

mp1990
3 марта 2014 в 14:12
0

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

Jukka K. Korpela
3 марта 2014 в 14:39
53

Это не угроза безопасности. (Можно полагаться на проверки на стороне клиента.) Это проблема удобства использования.

Jeff Tian
27 августа 2014 в 09:03
34

Я попробовал и обнаружил, что "novalidate" действительно требуется. Только добавление имени формы не работает.

Jeff Tian
27 августа 2014 в 09:04
1

Я столкнулся с этой проблемой при отправке формы Angular JS, и добавление «novalidate» решило эту проблему.

steel
17 ноября 2014 в 17:18
15

Добавление novalidate также останавливает проверку на стороне клиента, например, с гемом простой формы Rails. Лучше сделать поля проблемы необязательными, согласно ответу Ankit + комментарию Дэвида Брунова.

Pathros
2 июня 2015 в 15:25
1

Спасибо, это помогло мне понять, что у моей формы не имя, а идентификатор. Итак, я добавил атрибут name = "form-name", и теперь он работает нормально. Я больше не получаю эту ошибку;)

superluminary
5 июня 2015 в 16:16
2

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

oscargilfc
10 июня 2015 в 02:13
9

Я обнаружил, что «Недопустимый элемент управления формой с name = '' не может быть выбран». также показывает, находятся ли входы в <fieldset>

Ram
29 августа 2015 в 14:00
0

Решение @Pere также является допустимым сценарием, и в моем случае оно сработало. надеюсь, что это поможет кому-то, так как мы сможем решить проблему, не теряя силы проверки

ZurabWeb
4 сентября 2015 в 19:48
1

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

Quin
8 ноября 2015 в 17:44
0

Вы используете какой-то настраиваемый флажок? Их нельзя выделить. В любом случае вы можете направлять своих пользователей с помощью уведомления JavaScript, используя какой-либо пакет предупреждений.

techwestcoastsfosea
11 декабря 2015 в 05:11
0

novalidate работал у меня. Ошибка раздражает, но в моем случае не влияет на функциональность.

Mimouni
7 июня 2016 в 11:13
0

novalidate отключает поля с required = "true", это влияет на мои формы.

P_95
11 августа 2016 в 07:02
0

Это сработало хорошо, но моя форма видна, а не скрыта. И теперь содержимое form / textarea пусто; "" на стороне сервера.

alex
18 марта 2017 в 22:06
0

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

Native Coder
12 апреля 2017 в 18:34
0

@alex Вы должны ВСЕГДА полагаться на свой сервер для проверки. Проверка на стороне клиента предназначена только для взаимодействия с пользователем. НИКОГДА не полагайтесь только на это. Проверка на стороне клиента не должна вообще снижать рабочую нагрузку на сервер. Если да, то вы делаете это неправильно. :)

alex
12 апреля 2017 в 18:41
2

@NativeCoder - если вам нужно проверить, что номер телефона находится в определенном регулярном выражении, в этом сценарии вам потребуется выполнить обратную передачу на сервер. Это увеличивает накладные расходы и занимает больше времени, чем быстрая проверка регулярного выражения JS (снижает удобство использования). У вас может быть такая же проверка регулярного выражения на стороне клиента для предварительной проверки, а затем на вашем сервере вы выполняете окончательную проверку (которая всегда должна быть на месте, поэтому я говорю, что клиентская сторона не должна быть единственным типом проверки).

Native Coder
12 апреля 2017 в 21:11
2

@alex Тогда мы говорим то же самое. Всегда проверяйте серверную часть, несмотря ни на что. Таким образом, КОГДА кто-то пытается взломать и нарушить валидацию на стороне клиента, вы будете защищены.

FreeKrishna
18 апреля 2017 в 12:44
0

В моем случае проблема заключалась в том, что я забыл закрыть тег </form>, и он перекрывал другую форму под ним. Добавление закрывающего тега </form> исправило это для меня.

Alburkerk
27 июня 2017 в 07:27
1

Хорошее объяснение того, как работает проверка формы html и почему novalidate останавливает эту ошибку, было бы так полезно для стольких людей: / Слишком плохие ответы принимаются быстро