«Неправильный контроль формы» только в 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

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

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

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

Answer 2

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

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

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

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

Answer 3

заменить required на обязательный = "обязательный"