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

Добавление атрибута 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 свойство CSS display: none;.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Другая возможная причина и не рассматривается во всех предыдущих ответах, когда у вас есть нормальная форма с обязательными полями, и вы отправляете форму, а затем скрываете ее непосредственно после отправки (с помощью 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
  }

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

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

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

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

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

Есть вещи, которые меня еще удивляют... У меня есть форма с динамическим поведением для двух разных сущностей. Для одного объекта требуются некоторые поля, а другие нет. Итак, мой 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

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

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

ng-required = "boolean"

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

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

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

например.

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

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

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

Я нашел такую же проблему при использовании 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" >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 }

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

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

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

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

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

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

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

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

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

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

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

1> Adding a novalidate attribute to the form will help:
it will remove the  validation 


<form name="userForm" id="userForm" novalidate>

2> it can be issue of id or name value , it was already using somewhere 
change the value of id   and name 
2nd point help to fix the error