Недійсний елемент форми з ім'ям = '' не фокусується

У мене гостра проблема на моєму веб-сайті. У Google Chrome деякі клієнти не можуть перейти на мою сторінку оплати. При спробі подати форму я отримую цю помилку:

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

Це з консолі JavaScript.

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

Здається випадковим, хто отримує цю помилку. Чи є хтось, хто знає рішення для цього?

Ця проблема виникає в Chrome, якщо поле форми не вдалося перевірити, але через те, що відповідний недійсний елемент керування не фокусується, спроба браузера відобразити повідомлення "Будь ласка, заповніть це поле" поруч із ним .

Контроль форми може не бути орієнтованим на час запуску перевірки з кількох причин. Два описані нижче сценарії є найвидатнішими причинами:

• Поле не має значення відповідно до сучасного контексту ділової логіки. У такому сценарії відповідний елемент керування повинен бути видалений з DOM або він не повинен бути позначений requiredатрибутом у цій точці.

• Передчасна перевірка може статися через натискання користувачем клавіші ENTER на вході. Або користувач, натиснувши кнопку / елемент керування входом у формі, яка неправильно визначила typeатрибут керування. Якщо для атрибуту типу кнопки не встановлено значення button, Chrome (або будь-який інший веб-переглядач для цього питання) здійснює перевірку щоразу, коли натискається кнопка, оскільки submitце значення за замовчуванням для кнопкиtype атрибута .

  Щоб вирішити цю проблему, якщо у вас є кнопка на сторінці , що робить що - то інше, окрім відправити або скидання , завжди пам'ятайте , щоб зробити це: <button type="button">.

Також дивіться https://stackoverflow.com/a/7264966/1356062

Додавання 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має display: none;властивість CSS.

Якщо ви хочете створити власні входи для радіо / прапорців, де вони повинні бути приховані від інтерфейсу користувача та зберігати requiredатрибут, замість цього слід використовувати:

opacity: 0; Властивість CSS

Жодна з попередніх відповідей не працювала для мене, і у мене немає прихованих полів з required атрибутом.

У моєму випадку проблема була викликана мають , <form>а потім в <fieldset>якості свого першого дитини, який тримає <input>з requiredатрибутом. Видалення <fieldset>вирішеної проблеми. Або ви можете загорнути його форму; це дозволено HTML5.

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

Ще одна можливість, якщо ви отримуєте помилку на вході прапорця. Якщо ваші прапорці використовують спеціальний CSS, який приховує типовий параметр, і замінює його іншим стилем, це також спричинить не фокусируемую помилку в Chrome при помилці перевірки.

Я знайшов це у своєму стилі:

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

Просте виправлення полягало в тому, щоб замінити його таким:

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

Можливо, ви приховали (відображати: немає) поля з необхідним атрибутом.

Перевірте, чи всі обов'язкові поля видимі для користувача :)

Для мене це трапляється, коли є <select>поле з попередньо обраним параметром зі значенням '':

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

На жаль, це єдине крос-браузерне рішення для заповнювача ( Як зробити я заповнювача для вікна "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);          
});

Це повідомлення покаже, якщо у вас є такий код:

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

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

Так. Якщо для прихованого контролю форми потрібне поле, воно показує цю помилку. Одним із варіантів рішення було б відключення цього контролю форми . Це тому, що зазвичай, якщо ви ховаєте контроль форми, це тому, що ви не переймаєтесь його значенням. Тож пара цього значення імені контролю форми не надсилатиметься під час подання форми.

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

напр

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

Це повинно виконати завдання.

Це працювало на мене ... ура

Інша можлива причина, яка не міститься у всіх попередніх відповідях, коли у вас є звичайна форма з обов'язковими полями, і ви подаєте форму, а потім приховуєте її безпосередньо після подання (за допомогою JavaScript), не даючи часу на функціонування перевірки.

Функціонал перевірки спробує зосередити увагу на необхідному полі та покаже повідомлення про перевірку помилок, але поле вже приховано, тому "Недійсний елемент керування формою з ім'ям =" "не фокусується." з'являється!

Редагувати:

Щоб вирішити цей випадок, просто додайте наступну умову до вашого обробника подання

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

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

    // Submit and hide form safely
  }

Редагувати: Пояснення

Припустимо, що ви приховуєте форму під час подання, цей код гарантує, що форма / поля не будуть приховані, поки форма не стане дійсною. Отже, якщо поле недійсне, браузер може без проблем зосередитись на ньому, оскільки це поле все ще відображається.

Є речі, які все ще мене дивують ... У мене є форма з динамічною поведінкою для двох різних сутностей. Для однієї сутності потрібні деякі поля, а інші - не. Отже, мій JS-код, залежно від сутності, робить щось на зразок: $ ('# periodo'). RemoveAttr ('обов'язково'); $ ("# періодо-контейнер"). hid ();

і коли користувач вибирає іншу сутність: $ ("# періодо-контейнер"). show (); $ ('# періодо'). prop ('потрібно', правда);

Але іноді, коли форма подається, проблема видається: "Недійсне управління формою з ім'ям = періодо" 'не фокусується (я використовую те саме значення для id та імені).

Щоб вирішити цю проблему, ви повинні переконатися, що вхід, де ви встановлюєте або видаляєте "обов'язковий", завжди видно.

Отже, що я зробив:

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

Це вирішило мою проблему ... неймовірно.

У моєму випадку ..

ng-showвикористовувався.
ng-ifбуло поставлено на його місце і виправлено мою помилку.

Для кутового використання:

ng-Required = "булева"

Це застосує атрибут html5 'обов'язковий' лише у тому випадку, якщо значення є істинним.

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

Я прийшов сюди, щоб відповісти, що я сам запустив це питання на основі НЕ закриття </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' не фокусується.

Недійсний елемент форми з ім'ям = 'пароль' не фокусується.

Недійсний елемент форми з ім'ям = "підтвердити" не фокусується.

Існує багато способів виправити подібне

1. Додайте недійсну форму до своєї форми, але її абсолютно неправильно, оскільки це видалить перевірку форми, що призведе до неправильної інформації, введеної користувачами.

<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, залежить від вашого сценарію.

Я знайшов таку ж проблему при використанні Angular JS. Це було викликано використанням необхідних разом з ng-hid . Коли я натискав кнопку подання, коли цей елемент був прихованим, тоді сталася помилка Неправильний елемент управління з именем = '' не фокусується.нарешті!

Наприклад, використання ng-hid разом із необхідними:

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

Я вирішив це, замінивши потрібний замість ng-pattern.

Приклад рішення:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

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

Я виправив це, використовуючи ng-ifзамість ng-show/ng-hide на діві, що містить контроль форми, що вимагає перевірки.

Сподіваюся, це допоможе вам, хтось із кращих користувачів справи.

Дозвольте викласти свою справу, оскільки вона відрізнялася від усіх вищезазначених рішень. У мене був тег HTML, який був закритий неправильно. елемента не було required, але він був вбудований у hiddenдів

Проблема в моєму випадку полягала в тому type="datetime-local", що, з якоїсь причини, було підтверджено при поданні форми.

я змінив це

<input type="datetime-local" />

в це

<input type="text" />

Я хотів відповісти тут, оскільки НІКОЛИ з цих відповідей чи будь-якого іншого результату Google не вирішив проблему для мене.

Для мене це не мало нічого спільного з наборами полів або прихованими входами.

Я виявив, що якби я використав max="5"(наприклад), це призведе до цієї помилки. Якщо я використовував maxlength="5" ... помилки немає.

Мені вдалося кілька разів відтворити помилку та очистити помилку.

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

Крім того, ще одна непростою відповідь - використовувати атрибут HTML5 Placeholder, тоді не потрібно використовувати перевірки js.

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

Chrome не зможе знайти жодних порожніх, прихованих та потрібних елементів, на яких слід зосередити увагу. Просте рішення.

Сподіваюся, що це допомагає. Я повністю відсортований з цим рішенням.

Я прийшов сюди з тією ж проблемою. Для мене (введення прихованих елементів за потребою - тобто освіта в додатку для роботи) були потрібні прапори.

Я зрозумів, що валідатор стріляв по введеному швидше, ніж готовий документ, тому скаржився.

Мій оригінальний тег, необхідний для ng, використовував тег видимості (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>

Переконайтеся, що всі елементи керування у вашій формі з необхідним атрибутом також мають набір атрибутів імені

Ця помилка трапилася зі мною, оскільки я надсилав форму із заповненими обов'язковими полями.

Помилка виникла через те, що браузер намагався зосередити увагу на потрібних полях, щоб попередити користувача, що поля потрібні, але ці потрібні поля були приховані на дисплеї жодного діва, тому браузер не міг зосередитись на них. Я надсилав повідомлення з видимої вкладки, і обов’язкові поля знаходились у прихованій вкладці, отже, помилка.

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

Це тому, що у формі є прихований вхід з необхідним атрибутом.

У моєму випадку я мав поле вибору, і це приховано jquery tokenizer, використовуючи стиль inline. Якщо я не вибираю жоден маркер, браузер видає вказану вище помилку під час подання форми.

Отже, я виправив це за допомогою наведеної нижче методики 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-елемента для використання у формі.

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

Помилка посилалась на оригінальне поле, а не на клоновану версію.

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

Щоб обійти цю проблему, я видалив потрібний атрибут із початкового елемента та динамічно додав його до клонованого поля перед тим, як ввести його у форму. Тепер форма правильно перевіряє клоновані та модифіковані поля.