«Неправильный контроль формы» только в Google Chrome

Question

Код ниже работает в Safari, но в Chrome и Firefox форма не будет отправлена. Консоль Chrome регистрирует ошибку An invalid form control with name='' is not focusable. Есть идеи?

Обратите внимание, что, хотя элементы управления, приведенные ниже, не имеют имен, они должны иметь имена на момент отправки, заполненные Javascript ниже. Форма работает в Safari.

<form method="POST" action="/add/bundle"> 
<p> 
    <input type="text" name="singular" placeholder="Singular Name" required> 
    <input type="text" name="plural" placeholder="Plural Name" required> 
</p> 
<h4>Asset Fields</h4> 
<div class="template-view" id="template_row" style="display:none"> 
    <input type="text" data-keyname="name" placeholder="Field Name" required> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 
    <select data-keyname="fieldtype" required> 
        <option value="">Field Type...</option> 
        <option value="Email">Email</option> 
        <option value="Password">Password</option> 
        <option value="Text">Text</option> 
    </select>    
    <input type="checkbox" data-keyname="required" value="true"> Required
    <input type="checkbox" data-keyname="search" value="true"> Searchable
    <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
    <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
    <input type="radio" data-keyname="label" value="label" name="label"> Label
    <input type="radio" data-keyname="unique" value="unique" name="unique"> Unique
    <button class="add" type="button">+</button> 
    <button class="remove" type="button">-</button> 
</div> 

<div id="target_list"></div> 
    <p><input type="submit" name="form.submitted" value="Submit" autofocus></p> 
</form>

<script> 
function addDiv()
{
    var pCount = $('.template-view', '#target_list').length;
    var pClone = $('#template_row').clone();
    $('select, input, textarea', pClone).each(function(idx, el){
        $el = $(this);
        if ((el).type == 'radio'){
            $el.attr('value', pCount + '_' + $el.data('keyname'));
        }
        else {
            $el.attr('name', pCount + '_' + $el.data('keyname'));
        };
    });
    $('#target_list').append(pClone);
    pClone.show();
}

function removeDiv(elem){
    var pCount = $('.template-view', '#target_list').length;
    if (pCount != 1)
    {
        $(elem).closest('.template-view').remove();
    }
};

$('.add').live('click', function(){
    addDiv();
});

$('.remove').live('click', function(){
    removeDiv(this);
});

$(document).ready(addDiv);

</script>

Answer 1

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

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

Answer 2

Это сообщение будет отображаться, если у вас есть такой код:

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

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

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

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

, поэтому js-код для отображения div должен также включить кнопку отправки

вы также можете скрыть кнопку (следуетбыть отключенным и скрытым, потому что если он скрыт, но не отключен, пользователь может отправить форму другими способами, например, нажать enter в любом другом поле, но если кнопка отключена, этого не произойдет

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

, если кому-то нужны коды для этого, вы должны сказать мне точно, что вам нужно

Answer 3

Если вас не волнует проверка HTML5 (может быть, вы проверяете в JS или на сервере), вы можете попробовать добавить «novalidate» к форме или элементам ввода.

Answer 4

попробуйте использовать правильные теги для элементов управления HTML5 Как для числа (целые числа)

<input type='number' min='0' pattern ='[0-9]*' step='1'/>

для десятичных знаков или с плавающей точкой

 <input type='number' min='0' step='Any'/>

step = 'Any' Без этого вы не сможете отправить свою форму, указав в десятичном поле любое десятичное или плавающее значение, например 3,5 или 4,6.

Попробуйте исправить шаблон, введите для элементов управления HTML5 эту проблему.

Answer 5

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

В данном случае это было поле type="number", которое требуется.Если в это поле не было введено никакого значения, в консоли отображается сообщение об ошибке, а форма не отправляется.Ввод значения, а затем его удаление означает, что ошибка проверки отображается так, как и ожидалось.

Я считаю, что это ошибка в Chrome: мой обходной путь на данный момент должен был найти начальное значение / значение по умолчанию.

Answer 6

Без проверки выполнит работу.

<form action="whatever" method="post" novalidate>

Answer 7

Я должен сделать что-то подобное, чтобы исправить ошибку, поскольку у меня есть type="number" с min="0.00000001":

HTML:

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

JS:

$('input[type="submit"]').click(function(e) {
    //prevent chrome bug
    $("input:hidden").val(null);
});

Если я не установлю все скрытые поля ввода на null, chrome все равно попытается подтвердить ввод.

Answer 8

У меня была ошибка:

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

Это происходило из-за того, что я неправильно использовал обязательное поле, которое включалось и отключалось при нажатии на флажок. Решением было удалить атрибут required всякий раз, когда флажок не был отмечен, и пометить его как необходимый, когда флажок отмечен.

var telefono = document.getElementById("telefono");  
telefono.removeAttribute("required");

Answer 9

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

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">

Answer 10

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

step="0.1"