Ошибка недопустимый набор выбранных элементов civil

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

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

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

Я прочитал, что проблема может быть связана с скрытыми полями, имеющими требуемый атрибут.
Теперь проблема в том, что мы используем .NET webforms required field validators, а не атрибут html5 required.

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

этого недостаточно, чтобы заявить

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

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

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

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

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

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

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

обновление: 21 августа 2015

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

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

<form name="myform" novalidate>

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

<input type="hidden" required />

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

в моем случае проблема была с 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 зависит от вашего сценария.

альтернативно другой и надежный ответ-использовать атрибут заполнителя 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>

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

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