Name = '' ile geçersiz bir form denetimi odaklanamıyor

Web sitemde ciddi bir sorun var. Google Chrome'da bazı müşteriler ödeme sayfama devam edemiyor. Bir form göndermeye çalışırken bu hatayı alıyorum:

An invalid form control with name='' is not focusable.

Bu JavaScript konsolundan.

Sorunun gerekli özniteliğe sahip gizli alanlardan kaynaklanabileceğini okudum. Şimdi sorun html5 gerekli özniteliğini değil .net webforms gerekli alan doğrulayıcılarını kullanmamızdır.

Bu hatayı kimin aldığı rastgele görünüyor. Bunun için bir çözüm bilen var mı?

Bu sorun, bir form alanının doğrulanmasında başarısız olması durumunda, ancak ilgili geçersiz denetimin odaklanamaması nedeniyle tarayıcının yanında "Lütfen bu alanı doldurun" iletisini görüntülemeye çalışması başarısız olur.

Doğrulama tetiklendiğinde bir form denetimi birkaç nedenden dolayı odaklanamayabilir. Aşağıda açıklanan iki senaryo en belirgin nedenlerdir:

• Alan, iş mantığının mevcut bağlamına göre önemsizdir. Böyle bir senaryoda, ilgili denetim DOM'dan kaldırılmalı veya o requirednoktada öznitelik ile işaretlenmemelidir .

• Bir kullanıcının girişte ENTER tuşuna basması nedeniyle erken doğrulama gerçekleşebilir . Ya da denetimin typeniteliğini doğru tanımlamamış bir biçimde bir düğmeyi / giriş denetimini tıklayan bir kullanıcı . Bir düğmenin type özelliği olarak ayarlanmamışsa button, Chrome (veya bu konudaki başka bir tarayıcı), düğmenin her tıklanışında submitbir düğme typeözelliğinin varsayılan değeri olduğu için bir doğrulama gerçekleştirir .

  Eğer dışında başka bir şey yok sayfanızda bir düğme varsa, sorunu çözmek için göndermek veya sıfırlama , hep bunu unutmayın: <button type="button">.

Ayrıca bkz. Https://stackoverflow.com/a/7264966/1356062

novalidateForma bir özellik eklemek yardımcı olacaktır:

<form name="myform" novalidate>

Gözlerinde farklı form, Sen gizlenmiş olabilir inputhaiz requiredniteliğini:

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

Bu formöğelere odaklanamaz, requiredtüm gizli girişlerden kaldırmanız veya gerçekten gizli bir girdiye ihtiyacınız varsa bunları işlemek için javascript'te bir doğrulama işlevi uygulamanız gerekir.

Başkası bu sorunu yaşarsa ben de aynı şeyi yaşadım. Yorumlarda tartışıldığı gibi, tarayıcının gizli alanları doğrulamaya çalışmasıydı. Formda boş alanlar bulup onlara odaklanmaya çalışıyordu, ancak ayarlandıkları için display:none;yapamadılar. Dolayısıyla hata.

Buna benzer bir şey kullanarak çözmeyi başardım:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

Ayrıca, bu yalnızca Google Chrome'da "Geçersiz form denetimi" nin kopyası

Benim durumumda sorun ile input type="radio" requiredgizli olmak oldu:

visibility: hidden;

Gerekli giriş tipi bu hata iletisi de gösterecektir radioveya checkboxbir sahiptir display: none;CSS özelliği.

İsterseniz , arayüzde gizli edilmelidir özel radyo / onay kutusu girişlerini oluşturmak ve hala devam requiredniteliğini, bunun yerine kullanmalısınız:

opacity: 0; CSS özelliği

Önceki cevapların hiçbiri benim için işe yaramadı ve bu özelliğe sahip gizli alanım yok required.

Benim durumumda, problem olan neden oldu <form>ve daha sonra bir <fieldset>tutan ilk çocuğu olarak <input>sahip requiredöznitelik. Kaldırma <fieldset>sorunu çözdü. Veya formunuzu bununla sarabilirsiniz; HTML5 tarafından izin verilir.

Windows 7 x64, Chrome sürüm 43.0.2357.130 m.

Bir onay kutusu girişinde hata alıyorsanız başka bir olasılık. Onay kutularınız, varsayılanı gizleyen ve başka bir stille değiştiren özel CSS kullanıyorsa, bu, Chrome'da doğrulama hatası üzerinde odaklanamayan hatayı da tetikler.

Bunu stil sayfamda buldum:

input[type="checkbox"] {
    visibility: hidden;
}

Basit düzeltme bunu bununla değiştirmekti:

input[type="checkbox"] {
    opacity: 0;
}

Gerekli özniteliğe sahip gizli (display: none) alanlarınız olabilir .

Lütfen gerekli tüm alanların kullanıcı tarafından görülebildiğini kontrol edin :)

Benim için bu <select>, '' değerine sahip önceden seçilmiş bir seçeneğe sahip bir alan olduğunda :

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

Ne yazık ki, bir yer tutucu için tek çapraz tarayıcı çözümü ( 'seç' kutusu için yer tutucuyu nasıl yapabilirim? ).

Sorun, Chrome 43.0.2357.124'te ortaya çıkıyor.

Form gönderme sırasında görünmeyen, gerekli özniteliğe sahip herhangi bir alanınız varsa, bu hata atılır. Bu alanı gizlemeye çalıştığınızda gerekli özelliği kaldırmanız yeterlidir. Alanı tekrar göstermek istiyorsanız, gerekli özelliği ekleyebilirsiniz. Bu şekilde, doğrulama işleminizden ödün verilmeyecek ve aynı zamanda hata atılmayacaktır.

Select2 Jquery sorunu için

Sorun HTML5 doğrulamasının gizli bir geçersiz öğeye odaklanamamasından kaynaklanıyor. JQuery Select2 eklentisi ile uğraşırken bu sorunla karşılaştım.

Çözüm HTML5 validate olayından hemen önce işlem yapabilmeniz için formdaki her öğeye bir olay dinleyicisi ve 'geçersiz' olayı ekleyebilirsiniz.

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

Eğer 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>

Evet .. Gizli bir form denetimi gerekli alanı doldurduysa bu hatayı gösterir. Çözümlerden biri bu form denetimini devre dışı bırakmak olabilir . Bunun nedeni, genellikle bir form denetimini gizliyorsanız, bunun nedeni onun değeriyle ilgilenmemenizdir. Bu nedenle, form gönderilirken bu form denetim adı değer çifti gönderilmeyecektir.

.removeAttribute("required")Pencere yüklemesi sırasında gizlenen öğeleri deneyebilirsiniz . söz konusu öğenin javascript (sekmeli formlar) nedeniyle gizli olarak işaretlenmesi oldukça olası olduğundan

Örneğin

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

Bu görevi yerine getirmelidir.

Benim için çalıştı ... şerefe

Başka bir olası neden ve gerekli alanlara sahip normal bir form olduğunda ve formu gönderdikten sonra doğrulama işleminin çalışması için zaman vermeden doğrudan (javascript ile) gönderdikten sonra gizlediğiniz önceki tüm yanıtlarda yer almaz.

Doğrulama işlevi, gerekli alana odaklanmaya ve hata doğrulama iletisini göstermeye çalışacak, ancak alan zaten gizlenmiş, bu nedenle "name = '' ile geçersiz bir form denetimi odaklanamıyor." görünür!

Düzenle:

Bu durumu ele almak için gönderim işleyicinize aşağıdaki koşulu eklemeniz yeterlidir

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

Düzenle: Açıklama

Göndermede formu gizlediğinizi varsayarsak, bu kod form / alanların form geçerli hale gelinceye kadar gizlenmeyeceğini garanti eder. Dolayısıyla, bir alan geçerli değilse, bu alan hala görüntülendiğinden tarayıcı herhangi bir sorun olmadan odaklanabilir.

Beni hala şaşırtan şeyler var ... İki farklı varlık için dinamik davranışa sahip bir formum var. Bir varlık diğerinin gerektirmediği bazı alanlar gerektirir. Bu nedenle, JS kodum objeye bağlı olarak şöyle bir şey yapar: $ ('# periodo'). RemoveAttr ('required'); $ ( "# Periodo-konteyner") hide ().;

ve kullanıcı diğer varlığı seçtiğinde: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('gerekli', doğru);

Ancak bazen, form gönderildiğinde sorun görünür: "name = periodo ile geçersiz bir form denetimi '' odaklanamaz (kimlik ve ad için aynı değeri kullanıyorum).

Bu sorunu gidermek için, 'zorunlu' ayarladığınız veya sildiğiniz girdinin her zaman görünür olduğundan emin olmalısınız.

Yani, yaptığım şey:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

Bu benim sorunumu çözdü ... inanılmaz.

Benim durumumda..

ng-showkullanılıyordu.
ng-ifyerine konuldu ve hatamı düzeltti.

Açısal kullanım için:

ng gerekli = "boole"

Bu, yalnızca değer true olduğunda html5 'zorunlu' özniteliğini uygular.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Buraya, </form>etiketi kapatmamayı ve aynı sayfada birden çok formun bulunmamasını temel alarak bu sorunu kendim tetiklediğimi yanıtlamak için geldim . İlk form, başka bir yerden form girdileri üzerinde doğrulama aramayı içerecek şekilde genişletilecektir. BU formlar gizlendiğinden hatayı tetikledi.

örneğin:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

tetikleyiciler

Name = 'userId' ile geçersiz bir form denetimi odaklanamaz.

Name = 'password' ile geçersiz bir form denetimi odaklanamaz.

Name = 'confirm' ile geçersiz bir form denetimi odaklanamaz.

Bunu düzeltmek için birçok yol var

1. Formunuza novalidate ekleyin, ancak tamamen yanlıştır, çünkü kullanıcılar tarafından girilen yanlış bilgilere yol açacak form doğrulamasını kaldıracaktır.

<form action="...." class="payment-details" method="post" novalidate>

2. Kullanım, gerekli özniteliği zorunlu alanlardan kaldırabilir; bu da form doğrulamasını bir kez daha kaldıracağı için yanlıştır.

   Bunun yerine:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. Kullan, formu başka bir seçenek yapmak yerine göndermeyeceğiniz zaman gerekli alanları devre dışı bırakabilir. Bence bu önerilen çözüm.

   sevmek:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

veya javascript / jquery koduyla devre dışı bırakmanız senaryolarınıza bağlıdır.

Angular JS kullanırken aynı sorunu buldum. Ng-hide ile birlikte gerekli kullanımdan kaynaklanmıştır . Bu öğe gizlenirken gönder düğmesine tıkladığımda hata oluştu = '' adıyla geçersiz bir form denetimi odaklanamıyor. en sonunda!

Örneğin ng-hide'ı gerekli ile birlikte kullanma:

<input type="text" ng-hide="for some condition" required something >

Bunun yerine gerekli olanı ng-pattern ile değiştirerek çözdüm.

Çözüm örneği:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Buradaki diğer AngularJS 1.x kullanıcıları için, bu denetim, tamamlanması için kontrole ihtiyaç duymadığım zaman bir form denetiminin DOM'dan tamamen kaldırılması yerine görüntülenmesini gizlediğim için ortaya çıktı.

Doğrulama gerektiren form denetimi içeren div ng-ifyerine ng-show/ ng-hideüzerinde kullanarak bu düzeltildi .

Umarım bu durum size yardımcı olur.

Yukarıdaki çözümlerden farklı olduğu için durumumu açıklayayım. Doğru kapatılmayan bir html etiketi vardı. öğe değildi required , ama bir hiddendiv içine gömüldü

benim durumumdaki sorun type="datetime-local", - bazı nedenlerden ötürü - form gönderimi ile onaylanan ile oldu.

bunu değiştirdim

<input type="datetime-local" />

içine

<input type="text" />

Burada cevap vermek istedim, çünkü bu cevaplardan HİÇBİRİ veya başka bir Google sonucu sorunu benim için çözmedi.

Benim için alan kümeleri veya gizli girdilerle ilgisi yoktu.

Eğer kullandıysam max="5"(örneğin) bu hatayı üreteceğini buldum . Eğer kullandıysam maxlength="5" ... hata yok.

Hatayı ve hatanın temizlenmesini birkaç kez tekrarlayabildim.

Bu kodu kullanarak hata üretir neden hala kadarıyla, bilmiyorum bu devletler bile inanıyorum bir "min" olmadan, geçerli olmalıdır.

Alternatif olarak, başka ve kusursuz bir cevap HTML5 Placeholder özniteliğini kullanmaktır, o zaman herhangi bir js doğrulaması kullanmaya gerek yoktur.

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome, odaklanmak için boş, gizli ve gerekli öğeleri bulamaz. Basit Çözüm.

Umarım yardımcı olur. Ben tamamen bu çözüm ile sıralanmış.

Buraya aynı problemle geldim. Benim için (gizli öğeleri gerektiği gibi enjekte etmek - yani bir iş uygulamasında eğitim) gerekli bayraklara sahipti.

Benim fark ettiğim şuydu ki, validatör enjekte edilen belgeye hazır olandan daha hızlı ateş ediyordu, bu yüzden şikayet etti.

Orijinal ng gerekli etiketim görünürlük etiketini (vm.flags.hasHighSchool) kullanıyordu.

Gerekli ng-required = "vm.flags.highSchoolRequired == true" ayarlamak için özel bir bayrak oluşturarak çözdüm

Bu bayrağı ayarlamak için 10 ms geri arama ekledim ve sorun çözüldü.

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

Html:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

Formunuzda gerekli özniteliğe sahip tüm denetimlerin de ad özniteliğine ayarlandığından emin olun

Doldurulması zorunlu alanları içeren bir form gönderiyorum çünkü bu hata bana oldu.

Hata, tarayıcı, alanların gerekli olduğu konusunda kullanıcıyı uyarmak için gerekli alanlara odaklanmaya çalıştığı için oluşturuldu, ancak bu zorunlu alanlar, tarayıcı onlara odaklanamayacak şekilde hiçbir ekranda yok olarak gizlendi. Görünür bir sekmeden gönderiyordum ve gerekli alanlar gizli bir sekmedeydi, dolayısıyla hata.

Düzeltmek için, gerekli alanların doldurulduğunu kontrol ettiğinizden emin olun.

Çünkü formda gerekli özniteliği olan gizli bir girdi var.

Benim durumumda, bir seçim kutusu vardı ve satır içi stilini kullanarak jquery tokenizer tarafından gizlenir. Herhangi bir jeton seçmezseniz, tarayıcı form hatasını gönderirken yukarıdaki hatayı atar.

Yani, ben aşağıdaki css tekniği kullanarak sabit:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

Bir HTML öğesini formda kullanmak için klonlarken aynı hatayı aldım.

(İçine bir şablon yerleştirilmiş kısmen eksiksiz bir formum var ve sonra şablon değiştirildi)

Hata, klonlanan sürüme değil, orijinal alana başvuruyordur.

Doğrulamayı çalıştırmadan önce formu yeniden değerlendirmeye zorlayacak herhangi bir yöntem bulamadım (umarım mevcut olmayan eski alanlara yapılan göndermelerden kurtulacaktır).

Bu sorunu çözmek için, gerekli özniteliği orijinal öğeden kaldırdım ve forma enjekte etmeden önce dinamik olarak klonlanan alana ekledim. Form artık klonlanan ve değiştirilen alanları doğru bir şekilde doğrulamaktadır.