Yalnızca Google Chrome'da "geçersiz form denetimi"

Aşağıdaki kod Safari'de iyi çalışıyor ancak Chrome ve Firefox'ta form gönderilmeyecek. Chrome konsolu, hatayı günlüğe kaydeder An invalid form control with name='' is not focusable. Herhangi bir fikir?

Aşağıdaki kontrollerin isimleri olmasa da, teslim sırasında aşağıdaki Javascript ile doldurulmuş isimleri olması gerektiğini unutmayın. Form Safari'de ÇALIŞIR.

<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, 'Lütfen bu alanı doldurun' mesajını görüntüleyebilmek için gerekli ancak hala boş olan bir kontrole odaklanmak istiyor. Bununla birlikte, Chrome'un mesajı açmak istediği noktada, yani form gönderimi sırasında denetim gizliyse, Chrome gizli olduğu için denetime odaklanamaz ve bu nedenle form gönderilmez.

Bu nedenle, sorunu aşmak için, bir denetim javascript tarafından gizlendiğinde, bu denetimden 'gerekli' özniteliği de kaldırmamız gerekir.

Böyle bir kodunuz varsa bu mesajı gösterecektir:

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

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

bu sorunun çözümü, sitenin nasıl çalışması gerektiğine bağlı olacaktır.

örneğin, bu alan zorunlu olmadıkça formun gönderilmesini istemiyorsanız, gönder düğmesini devre dışı bırakmalısınız

bu nedenle, div'i gösterecek js kodu gönder düğmesini de etkinleştirmelidir

düğmeyi de gizleyebilirsiniz (devre dışı bırakılmalı ve gizlenmelidir çünkü eğer gizliyse ancak devre dışı bırakılmamışsa, kullanıcı formu başka enterherhangi bir alana basmış gibi gönderebilir ancak düğme devre dışı bırakılırsa bu olmaz

formun, div gizliyse gönderilmesini istiyorsanız, içindeki gerekli tüm girdileri devre dışı bırakmalı ve div'i gösterirken girişleri etkinleştirmelisiniz.

birinin kodlara ihtiyacı varsa, bana tam olarak neye ihtiyacın olduğunu söylemelisin

HTML5 doğrulamasını önemsemiyorsanız (belki JS'de veya sunucuda doğruluyorsunuz), forma veya giriş öğelerine "novalidate" eklemeyi deneyebilirsiniz.

HTML5 kontrolleri için uygun etiketleri kullanmaya çalışın Like for Number (tamsayılar)

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

Ondalık sayılar veya kayan nokta için

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

step = 'Herhangi' Bu olmadan formunuzu yukarıdaki alana 3.5 veya 4.6 gibi ondalık veya kayan değer girerek gönderemezsiniz.

Kalıbı düzeltmeyi deneyin, bu sorunu düzeltmek için HTML5 kontrolleri yazın.

Bu hatayı alıyordum ve aslında gizli olmayan bir alanda olduğunu belirledim.

Bu durumda, bir type="number" gerekli olan bir alandı. Bu alana herhangi bir değer girilmediğinde, hata mesajı konsolda gösterilir ve form gönderilmez. Bir değer girilmesi ve ardından kaldırılması, doğrulama hatasının beklendiği gibi gösterildiği anlamına gelir.

Bunun Chrome'da bir hata olduğuna inanıyorum: şimdilik çözümüm bir başlangıç ​​/ varsayılan değer bulmaktı.

Şu hatayı aldım:

Name = 'telefono' ile geçersiz bir form kontrolü odaklanılamaz.

Bu, gerekli alanı doğru kullanmadığım için oluyordu, bu da bir onay işaretine tıklandığında etkinleştirildi ve devre dışı bırakıldı. Çözüm, requiredonay kutusu işaretlenmediğinde özelliği kaldırmak ve onay kutusu işaretlendiğinde gerekli olarak işaretlemekti.

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

Hatayı düzeltmek için buna benzer bir şey yapmam gerekiyor, çünkü bazılarına type="number"sahip olduğumda 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);
});

Tüm gizli giriş alanını nullkrom olarak ayarlamazsam, yine de girişi doğrulamaya çalışacaktır.

Hiçbir onaylama işi yapmaz.

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

Radyo madde işaretleri yerine düğmeler kullandığım ve JS aracılığıyla "etkin" durumunu değiştirdiğim için giriş alanlarında class = "hidden" olduğunda bu sorunu yaşadım ..

Mesajın görünmesini istediğim aynı gruba fazladan bir radyo giriş alanı ekledim:

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

diğer 2 aktif mermi görünmez, bu değil ve bu doğrulama mesajını tetikliyor ve konsol hatası yok - biraz hack ama bugünlerde ne yok ..

ondalık biçim eklerseniz bu hata alır. sadece ekledim

step="0.1"

Form için belirlediğim aralığın dışında bir sayı (999999) girdiğimde bu hata mesajını aldım.

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

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

tüm jQuery kodumu arasına koyana kadar benim için çalışmadı:

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

yerine koymak required gerekli tarafından = "required"