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

добавлять novalidate атрибут формы поможет:

<form name="myform" novalidate>

в вашей форме у вас может быть скрытый ввод с обязательным атрибутом.

<input type="hidden" required />

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

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

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

visibility: hidden;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Edit:

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

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

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

    // Submit and hide form safely
  }

Edit: Объяснение

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

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

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");        
}

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

это сработало для меня... ура!--3-->

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

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

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

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

недопустимая форма управление с name= 'password' не является фокусируемым.

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

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

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

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

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

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

   как:

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

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

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

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

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

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

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

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

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

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

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

 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

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

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

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

Its, потому что в форме есть скрытый вход с требуемым атрибутом.

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

Итак, я исправил его, используя приведенную ниже технику 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-элемента для использования в форме.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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