Недопустимое управление формой с помощью name= '' не настраивается

Ответ 1

Недостаточно указать

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

Это не объясняет проблему, и ОП, возможно, не понимал, почему это поможет, или если это действительно полезно.

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

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

Итак, чтобы обойти проблему, когда элемент управления скрыт от javascript, мы также должны удалить атрибут "required" из этого элемента управления.

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

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

ОБНОВЛЕНИЕ: 21 августа 2015 г.

Ошибка, о которой идет речь, может также возникнуть из-за преждевременной проверки. Преждевременная проверка может произойти, если у вас есть вход <button> без установленного атрибута типа. Без атрибута типа кнопки, заданной на кнопку, Chrome (или любой другой браузер, если на то пошло) выполняет проверку каждый раз, когда нажимается кнопка, потому что отправить является типом кнопок по умолчанию. Чтобы решить проблему, если на вашей странице есть кнопка, которая делает что-то еще, кроме submit или reset, всегда помните об этом: <button type="button">

Ответ 2

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

<form name="myform" novalidate>

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

visibility: hidden;

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

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

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

Ответ 6

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

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

Я нахожусь в Windows 7 x64, Chrome версии 43.0.2357.130 м.

Ответ 7

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

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

Ответ 8

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

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

К сожалению, это единственное кроссбраузерное решение для заполнителя (Как сделать placeholder для поля "select" ?).

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

Ответ 9

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

Ответ 10

Для задачи 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);          
});

Ответ 11

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

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

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

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

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

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

Edit:

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

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

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

    // Submit and hide form safely
  }

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

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

Ответ 15

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

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

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

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

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

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

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

Ответ 16

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

например.

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

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

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

Ответ 17

Для Angular используйте:

ng-required = "boolean"

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

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

Ответ 18

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

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

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

Триггеры

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

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

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

Ответ 19

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

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

Ответ 20

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

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

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

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

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

<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, зависит от вашего сценария.

Ответ 21

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

Например, используя 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" >

Ответ 22

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

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

я изменил это

<input type="datetime-local" />

в это

<input type="text" />

Ответ 23

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

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

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

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

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

Ответ 24

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

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

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

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

Ответ 25

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

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

В моем оригинальном теге 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>

Ответ 26

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

Ответ 27

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

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

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

Ответ 28

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

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

 }

Ответ 29

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

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

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

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

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

Ответ 30

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

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

Короче говоря, div id был

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

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

Упомянуто это и повторное использование числовых чисел, вместо этого i.e, похоже, исправляет проблему.