[html] Google 크롬에서만 “잘못된 양식 제어”

아래 코드는 Safari에서 잘 작동하지만 Chrome 및 Firefox에서는 양식이 제출되지 않습니다. Chrome 콘솔이 오류를 기록합니다 An invalid form control with name='' is not focusable. 어떤 아이디어?

아래 컨트롤에는 이름이 없지만 제출 당시 이름이 있어야하며 아래의 자바 스크립트로 채워 져야합니다. 양식은 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>

답변

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

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

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

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

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

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

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