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

Приведенный ниже код хорошо работает в 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

Я получал эту ошибку и определил, что на самом деле это поле, которое не было скрыто.

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

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

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

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

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

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

Я должен сделать что - то вроде этого , чтобы исправить эту ошибку, так как у меня есть некоторые 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);
});

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

Никакая проверка не сделает работу.

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

У меня была эта проблема, когда у меня был class = "hidden" в полях ввода, потому что я использовал кнопки вместо радио-маркеров и менял "активное" состояние с помощью JS ..

Я просто добавил дополнительную часть поля ввода радио той же группы, где я хотел, чтобы появилось сообщение:

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

два других активных маркера невидимы, этого нет, и это вызывает сообщение проверки и никаких ошибок консоли - немного взлома, но чего нет в наши дни ..

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

step="0.1"

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

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

$("...").attr("required"); and $("...").removeAttr("required"); 

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

$(document).ready(function() {
    //jQuery code goes here
});

заменить requiredна required = "required"