Недопустимое управление формой с помощью name= '' не является настраиваемым. БЕЗ КАКИХ-ЛИБО ТРЕБУЕТНЫХ ИЛИ СКРЫТЫХ ВХОДОВ

Я столкнулся с известной ошибкой Chrome "not-focusable-input", но моя ситуация отличается от объяснения в другом сообщении, которое я мог найти там.

У меня есть это сообщение об ошибке, дублированное сначала на хорошо заостренном вводе, этот вход не имеет обязательного атрибута: Код:

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

Ошибка: Недопустимое управление формой с name= 'priceFinal' не является настраиваемым.

Пока пользователь заполняет форму, это поле получает свое значение с помощью js script с jquery. Пользователь вводит размер в другом входе, script выполняет свою математику с размером, а затем помещает результат в вход "priceFinal" с помощью функции jquery:.val()

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

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

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

Это странно, потому что единственный вход без имени в моей форме - это тип: отправить один

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

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

<fieldset>
    <input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos"  class="cInput" required >
    <input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
    <input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>

<fieldset>
    <input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
    <input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required> 
</fieldset>

Решение novalidate очищает ошибку, но не исправляет ее, я имею в виду, что должен быть способ решить ее без хаков.

У кого-нибудь есть представление о том, что может произойти? Благодаря

ОТВЕТЫ

Ответ 1

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

Эта ошибка присутствует только в хром I, протестированном в версии 43.0.2357.124 м. Не происходит в firefox.

Пример (очень простой).

<form>
  <fieldset name="mybug">
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

Ответ 2

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

Чтобы получить лучший ответ с консоли:

  • Назначить каждому элементу DOM новое имя
  • Задайте каждый вход и выберите style.display в 'block'

  • Изменен тип ввода [type = "hidden" ] элементов в 'text'

    function cleanInputs(){
    var inputs  = document.getElementsByTagName( 'input' ),
        selects = document.getElementsByTagName( 'select' ),
        all     = document.getElementsByTagName( '*' );
    for( var i=0, x=all.length; i<x; i++ ){
        all[i].setAttribute( 'name', i + '_test' );
    }
    for( var i=0, x=selects.length; i<x; i++ ){
        selects[i].style.display = 'block';
    }
    for( var i=0, x=inputs.length; i<x; i++ ){
        if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
            inputs[i].setAttribute( 'type', 'text' );
        }
        inputs[i].style.display = 'block';
    }
    return true;
}

В консоли я запустил cleanInputs(), а затем отправил форму. Результатом, с консоли, было:

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

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

Затем, перейдя на представление "Элементы" веб-разработчика, я смог найти "28_test" и "103_test" (оба набора полей) - подтверждение того, что моя проблема была обязательным полем ввода, вложенным внутри набора полей.

Ответ 3

У меня была такая же проблема, поэтому я удалил required = "required" из неприятных полей.

Ответ 4

Если вы получите ошибку при выполнении функции jQuery, попробуйте поставить "return false" на вашу функцию или функцию (e) {e.preventDefault();...}

Ответ 5

Пока я задавал вопрос, я понял одно: значение, которое script помещало в поле priceFinal, иногда было десятичным числом.

В этом случае решением было написать атрибут шага для этого ввода:

... step="any" ...

Шаг на w3s

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

Ответ 6

Nach дал мне лучший указатель... (y) У меня также был тип ввода = "число" с шагом = "0,1", и консоль показывает мне эту ошибку при проверке: недопустимый элемент управления формы с name= 'не фокусируется.

удалите шаг = "0,1" на элементе, и теперь форма может быть проверена

Ответ 7

У меня была эта проблема. для его исправления, добавьте

novalidate

как атрибут формы. например

<form action="" novalidate>
....
</form>

Ответ 8

Вот решение....

<form>
  <input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>

Многие люди не понимают, что передача false в ng-required отключает директиву.