Google Chrome не может отправить форму с отображением: нет

Question

Кнопка Отправить в этой форме ничего не делает, если я не удаляю style="display:none" из template=row div. Почему ??

(name каждого элемента управления формы динамически заполняется javascript, однако, чтобы упростить устранение неполадок, я запустил форму без javascript, и проблема сводится к тому, существует ли этот тег display ).

Вот что говорит консоль Chrome:

bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable

HTML:

<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">
    <input type="text" data-keyname="hint" placeholder="Hint">


    <select data-keyname="fieldtype" required>
        <option value="">Field Type...</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" required> Label
    <input type="radio" data-keyname="unique" value="unique" name="unique" required> 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>

Answer 1

Причина, по-видимому, в HTML 5 проверка ограничения - это атрибут require.Chrome начал поддерживать это в своих последних версиях.

По-видимому, это проблема обратной совместимости , но вы можете исправить ее, установив атрибут formnovalidate для кнопки отправки.

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

Если один из элементов управленияне обрабатывается (например, у него установлен скрытый атрибут), тогда пользовательские агенты могут сообщать об ошибке сценария.

Ваши входные данные имеют тип text, поэтому их цель - позволить пользователям вводить данные, отправляяих содержание скрыто - это то, что пользователь, вероятно, не захочет.

Если вы все еще хотите отправлять скрытые входные данные во время использования проверки клиента, я бы предложил вместо этого использовать <input type="hidden"> - я мог бы представить, что там нет ошибок при проверке, поскольку они предназначены быть невидимыми.

Answer 2

Я сделал JSFiddle для изучения вашей проблемы здесь , и мне удалось исправить это, добавив флажок к вашим входам радиокнопок, например: <input type="radio" data-keyname="label" value="label" name="label" required checked>. В приведенном выше коде переключатели не проверяются, но, поскольку они помечены как required, форма не проходит проверку, и Chrome отказывается отправить форму.