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>

Chrome은 필수이지만 여전히 비어있는 컨트롤에 집중하여 '이 필드를 입력하세요'라는 메시지를 표시 할 수 있도록합니다. 그러나 Chrome이 메시지를 팝업하려는 지점, 즉 양식 제출 시점에 컨트롤이 숨겨져있는 경우 Chrome은 숨겨져 있기 때문에 컨트롤에 집중할 수 없으므로 양식이 제출되지 않습니다.

따라서 문제를 해결하려면 컨트롤이 자바 스크립트에 의해 숨겨 질 때 해당 컨트롤에서 'required'속성도 제거해야합니다.

다음과 같은 코드가있는 경우 해당 메시지가 표시됩니다.

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

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

이 문제에 대한 해결책은 사이트의 작동 방식에 따라 달라집니다.

예를 들어이 필드가 필수가 아닌 한 양식을 제출하지 않으려면 제출 버튼을 비활성화해야합니다.

따라서 div를 표시하는 js 코드는 제출 버튼도 활성화해야합니다.

버튼도 숨길 수 있습니다 (숨겨져 있지만 비활성화되지 않은 경우 사용자가 enter다른 필드에서 누르는 것과 같은 방식으로 다른 방법으로 양식을 제출할 수 있기 때문에 비활성화 및 숨겨야 하지만 버튼이 비활성화 된 경우에는 이런 일이 발생하지 않습니다)

div가 숨겨져있는 경우 양식을 제출하려면 그 안에 필요한 입력을 비활성화하고 div를 표시하는 동안 입력을 활성화해야합니다.

누군가가 코드를 필요로한다면 필요한 것을 정확히 알려주세요

HTML5 유효성 검사에 관심이없는 경우 (JS 또는 서버에서 유효성 검사 중일 수 있음) 양식 또는 입력 요소에 "novalidate"를 추가 할 수 있습니다.

HTML5 컨트롤에 적절한 태그를 사용하십시오. Like for Number (integers)

<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의 버그라고 생각합니다. 현재 해결 방법은 초기 / 기본값을 찾는 것이 었습니다.

오류가 발생했습니다.

name = '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);
});

숨겨진 모든 입력 필드를 null크롬으로 설정하지 않으면 입력 유효성 검사를 시도합니다.

유효성 검사는 작업을 수행하지 않습니다.

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

라디오 총알 대신 버튼을 사용하고 JS를 통해 "활성"상태를 변경했기 때문에 입력 필드에 class = "hidden"이있을 때이 문제가 발생했습니다.

나는 단순히 메시지가 나타나기를 원하는 동일한 그룹의 추가 라디오 입력 필드 부분을 추가했습니다.

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

다른 2 개의 활성 총알은 보이지 않습니다.이 총알은 보이지 않으며 이것은 유효성 검사 메시지를 트리거하고 콘솔 오류가 발생하지 않습니다. 약간의 해킹이지만 요즘에는 그렇지 않습니다.

이 오류는 십진수 형식을 추가하면 발생합니다. 나는 단지 추가한다

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
});

requiredrequired = "required"로 교체