Niepoprawna kontrolka formularza o nazwie = '' nie może być aktywowana

Mam ostry problem na mojej stronie internetowej. W Google Chrome niektórzy klienci nie mogą przejść do mojej strony płatności. Podczas próby przesłania formularza pojawia się ten błąd:

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

To z konsoli JavaScript.

Czytałem, że problem może być spowodowany ukrytymi polami posiadającymi wymagany atrybut. Problem polega na tym, że używamy formularzy internetowych wymaganych. Walidatorów pól, a nie wymaganego atrybutu HTML5.

Wydaje się losowe, kto dostaje ten błąd. Czy jest ktoś, kto zna rozwiązanie tego problemu?

Ten problem występuje w przeglądarce Chrome, jeśli sprawdzanie poprawności pola formularza nie powiedzie się, ale z powodu niemożności wyostrzenia odpowiedniego niepoprawnego elementu sterującego przeglądarka próbuje wyświetlić obok niego komunikat „Wypełnij to pole” .

Kontrola formularza może nie być aktywna w momencie uruchomienia sprawdzania poprawności z kilku powodów. Dwa opisane poniżej scenariusze są najbardziej widocznymi przyczynami:

• To pole jest nieistotne zgodnie z bieżącym kontekstem logiki biznesowej. W takim scenariuszu odpowiednią kontrolę należy usunąć z DOM lub nie należy requiredw tym momencie oznaczać atrybutu.

• Przedwczesna walidacja może wystąpić, gdy użytkownik naciśnie klawisz ENTER na wejściu. Lub użytkownik klikając przycisk / kontrolkę wejściową w formularzu, który nie zdefiniował typepoprawnie atrybutu kontrolki. Jeśli atrybut typu przycisku nie jest ustawiony na button, Chrome (lub dowolna inna przeglądarka w tym zakresie) przeprowadza weryfikację za każdym razem, gdy przycisk zostanie kliknięty, ponieważ submitjest to domyślna wartość typeatrybutu przycisku .

  Aby rozwiązać ten problem, jeśli masz przycisk na swojej stronie, że robi coś innego niż inne przedstawienia lub resecie , zawsze pamiętać, aby to zrobić: <button type="button">.

Zobacz także https://stackoverflow.com/a/7264966/1356062

Dodanie novalidateatrybutu do formularza pomoże:

<form name="myform" novalidate>

W twoim form, mógłbyś ukryć inputposiadając requiredatrybut:

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

Nie formmożna skupić się na tych elementach, musisz usunąć requiredze wszystkich ukrytych danych wejściowych lub zaimplementować funkcję sprawdzania poprawności w javascript, aby obsłużyć je, jeśli naprawdę potrzebujesz ukrytych danych wejściowych.

W przypadku, gdy ktoś ma ten problem, doświadczyłem tego samego. Jak omówiono w komentarzach, było to spowodowane próbą sprawdzenia poprawności ukrytych pól przez przeglądarkę. Znajdował puste pola w formularzu i próbował się na nich skupić, ale ponieważ były ustawione display:none;, nie mogło. Stąd błąd.

Udało mi się to rozwiązać, używając czegoś podobnego do tego:

$("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.
});

Jest to prawdopodobnie duplikat „Niepoprawnej kontroli formularza” tylko w Google Chrome

W moim przypadku problem polegał na input type="radio" requiredbyciu ukrytym za pomocą:

visibility: hidden;

Ten komunikat o błędzie pokaże również, czy wymagany typ wejścia radiolub checkboxmadisplay: none; właściwość CSS.

Jeśli chcesz utworzyć niestandardowe wejścia radia / pola wyboru, w których należy je ukryć przed interfejsem użytkownika i nadal zachowaćrequired atrybut, należy zamiast tego użyć:

opacity: 0; Właściwość CSS

Żadna z poprzednich odpowiedzi nie działała dla mnie i nie mam żadnych ukrytych pól z required atrybutem.

W moim przypadku problem został spowodowany przez mającego <form>a następnie <fieldset>jako jej pierwsze dziecko, które trzyma <input>z requiredatrybutu. Usuwanie <fieldset>rozwiązanego problemu. Lub możesz owinąć nim swój formularz; jest to dozwolone przez HTML5.

Korzystam z systemu Windows 7 x64, wersja Chrome 43.0.2357.130 m.

Jeszcze jedna możliwość, jeśli pojawia się błąd na wejściu pola wyboru. Jeśli pola wyboru używają niestandardowego kodu CSS, który ukrywa wartość domyślną i zastępuje ją inną stylizacją, spowoduje to również błąd, na który nie można się skupić w Chrome po błędzie sprawdzania poprawności.

Znalazłem to w moim arkuszu stylów:

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

Prostą poprawką było zastąpienie go następującym:

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

Możliwe, że ukryłeś (wyświetl: brak) pola z wymaganymi atrybutem.

Sprawdź, czy wszystkie wymagane pola są widoczne dla użytkownika :)

Dla mnie dzieje się tak, gdy jest <select>pole z wcześniej wybraną opcją o wartości „”:

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

Niestety jest to jedyne rozwiązanie przeglądarki zastępczej dla symboli zastępczych ( Jak zrobić symbol zastępczy dla pola „wybierz”? ).

Problem pojawia się w Chrome 43.0.2357.124.

Jeśli masz jakieś pole z wymaganym atrybutem, które nie jest widoczne podczas przesyłania formularza, ten błąd zostanie zgłoszony. Po prostu usuwasz wymagany atrybut, gdy próbujesz ukryć to pole. Możesz dodać wymagany atrybut, jeśli chcesz ponownie wyświetlić pole. W ten sposób twoja walidacja nie zostanie naruszona, a jednocześnie błąd nie zostanie zgłoszony.

Dla problemu Select2 Jquery

Problem wynika z faktu, że sprawdzanie poprawności HTML5 nie może skupić ukrytego nieprawidłowego elementu. Natknąłem się na ten problem, gdy miałem do czynienia z wtyczką jQuery Select2.

Rozwiązanie Możesz wstrzyknąć detektor zdarzeń i „nieprawidłowe” zdarzenie każdego elementu formularza, aby można było nim manipulować tuż przed sprawdzeniem poprawności zdarzenia HTML5.

$('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);          
});

Wyświetli tę wiadomość, jeśli masz taki kod:

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

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

Tak .. Jeśli kontrola formularza ukrytego wymagała pola, pokazuje ten błąd. Jednym rozwiązaniem byłoby wyłączenie tej kontroli formularza . Wynika to z tego, że zazwyczaj jeśli ukrywasz kontrolę formularza, dzieje się tak dlatego, że nie przejmujesz się jego wartością. Tak więc para wartości nazwa kontrolki formularza nie zostanie wysłana podczas przesyłania formularza.

Możesz wypróbować .removeAttribute("required")te elementy, które są ukryte podczas ładowania okna. ponieważ jest całkiem prawdopodobne, że dany element jest oznaczony jako ukryty z powodu javascript (formularze z kartami)

na przykład

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

To powinno wykonać zadanie.

To działało dla mnie ... na zdrowie

Inna możliwa przyczyna, która nie została uwzględniona we wszystkich poprzednich odpowiedziach, gdy masz normalny formularz z wymaganymi polami i przesyłasz formularz, a następnie ukrywasz go bezpośrednio po przesłaniu (za pomocą javascript), nie dając czasu na sprawdzenie poprawności.

Funkcja sprawdzania poprawności spróbuje skoncentrować się na wymaganym polu i wyświetli komunikat o sprawdzeniu poprawności błędu, ale pole to zostało już ukryte, więc „Niepoprawna kontrola formularza o nazwie =” nie może być aktywowana ”. pojawia się!

Edytować:

Aby poradzić sobie z tą sprawą, wystarczy dodać następujący warunek w module obsługi przesyłania

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

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

    // Submit and hide form safely
  }

Edycja: objaśnienie

Zakładając, że ukrywasz formularz podczas przesyłania, ten kod gwarantuje, że formularz / pola nie zostaną ukryte, dopóki formularz nie stanie się prawidłowy. Jeśli więc pole jest nieprawidłowe, przeglądarka może bez problemu skupić się na nim, ponieważ to pole jest nadal wyświetlane.

Są rzeczy, które wciąż mnie zaskakują ... Mam formularz z dynamicznym zachowaniem dla dwóch różnych bytów. Jedna jednostka wymaga niektórych pól, których druga nie. Tak więc mój kod JS, w zależności od encji, robi coś takiego: $ ('# periodo'). RemoveAttr ('wymagany'); $ („# periodo-container”). hide ();

a gdy użytkownik wybierze inny byt: $ („# periodo-container”). show (); $ („# periodo”). prop („wymagany”, prawda);

Ale czasami, kiedy formularz jest przesyłany, pojawia się problem: „Niepoprawna kontrola formularza o nazwie = okres” nie może być aktywowana (używam tej samej wartości dla identyfikatora i nazwy).

Aby rozwiązać ten problem, musisz upewnić się, że wejście, w którym ustawiasz lub usuwasz „wymagane”, jest zawsze widoczne.

Więc to co zrobiłem to:

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

To rozwiązało mój problem ... niewiarygodne.

W moim przypadku..

ng-showbył używany.
ng-ifzostał umieszczony na swoim miejscu i naprawił mój błąd.

Do użytku kątowego:

ng-wymagany = "boolean"

Spowoduje to zastosowanie atrybutu „wymagane” html5 tylko wtedy, gdy wartość jest prawdą.

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

Przyszedłem tutaj, aby odpowiedzieć, że sam uruchomiłem ten problem w oparciu o NIE zamykanie </form> tagu ORAZ posiadanie wielu formularzy na tej samej stronie. Pierwszy formularz będzie obejmował wyszukiwanie poprawności danych wejściowych formularza z innych źródeł. Ponieważ te formularze są ukryte, spowodowały błąd.

na przykład:

<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>

Wyzwalacze

Niepoprawna kontrolka formularza o nazwie = „userId” nie może być aktywowana.

Niepoprawna kontrola formularza o nazwie = „hasło” nie może być aktywowana.

Niepoprawna kontrola formularza o nazwie = „potwierdź” nie może być aktywowana.

Istnieje wiele sposobów, aby to naprawić

1. Dodaj nowelizację do formularza, ale jest całkowicie niepoprawna, ponieważ usunie sprawdzanie poprawności formularza, co doprowadzi do błędnych informacji wprowadzonych przez użytkowników.

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

2. Użyj może usunąć wymagany atrybut z wymaganych pól, co jest również błędne, ponieważ po raz kolejny usunie sprawdzanie poprawności formularza.

   Zamiast tego:

<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. Użyj może wyłączyć wymagane pola, jeśli nie zamierzasz przesyłać formularza zamiast robić inne opcje. To moim zdaniem zalecane rozwiązanie.

   lubić:

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

lub wyłącz to za pomocą kodu javascript / jquery, zależy od Twojego scenariusza.

Znalazłem ten sam problem podczas korzystania z Angular JS. Było to spowodowane używaniem wymaganym razem z ng-hide . Kiedy kliknąłem przycisk wysyłania, gdy ten element był ukryty, pojawił się błąd . Niepoprawna kontrola formularza o nazwie = '' nie może być aktywowana.Wreszcie!

Na przykład użycie ng-hide razem z wymaganymi:

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

Rozwiązałem go, zastępując zamiast tego wymaganą wzorzec ng.

Na przykład rozwiązanie:

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

Dla innych użytkowników AngularJS 1.x ten błąd pojawił się, ponieważ ukrywałem formant formularza przed wyświetlaniem zamiast całkowicie go usuwać z DOM, gdy nie potrzebowałem tej kontroli.

Naprawiłem to za pomocą ng-ifzamiast ng-show/ng-hide na div zawierającej kontrolkę formularza wymagającą walidacji.

Mam nadzieję, że pomoże to innym użytkownikom skrzynek.

Pozwólcie, że przedstawię mój przypadek, ponieważ różni się on od wszystkich powyższych rozwiązań. Miałem tag HTML, który nie został poprawnie zamknięty. element nie był required, ale był osadzony w hiddendiv

problem w moim przypadku polegał na tym type="datetime-local", że - z jakiegoś powodu - był sprawdzany przy składaniu formularza.

zmieniłem to

<input type="datetime-local" />

w tym

<input type="text" />

Chciałem tutaj odpowiedzieć, ponieważ ŻADNA z tych odpowiedzi ani żaden inny wynik Google nie rozwiązał dla mnie problemu.

Dla mnie nie miało to nic wspólnego z zestawami pól ani ukrytymi danymi wejściowymi.

Odkryłem, że jeśli użyję max="5"(np.), Spowoduje to ten błąd. Gdybym użył maxlength="5" ... nie ma błędu.

Kilka razy udało mi się odtworzyć błąd i usunąć błąd.

I nadal nie wiem dlaczego przy użyciu tego kodu powoduje błąd, jeśli chodzi o tych państw powinno być ważne, nawet bez „min” Wierzę.

Alternatywnie inną i niezawodną odpowiedzią jest użycie atrybutu symbolu zastępczego HTML5, wtedy nie będzie potrzeby używania sprawdzania poprawności js.

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

Chrome nie będzie w stanie znaleźć pustych, ukrytych i wymaganych elementów, na których mógłby się skupić. Proste rozwiązanie.

Mam nadzieję, że to pomaga. Dzięki temu rozwiązaniu jestem całkowicie posortowany.

Przybyłem tutaj z tym samym problemem. Dla mnie (wstrzykiwanie ukrytych elementów w razie potrzeby - tj. Wykształcenie w aplikacji o pracę) miałem wymagane flagi.

Uświadomiłem sobie, że walidator wystrzeliwuje wstrzyknięty szybciej niż dokument jest gotowy, więc narzekał.

Mój oryginalny tag wymagany przez ng używał tagu widoczności (vm.flags.hasHighSchool).

Rozwiązałem problem, tworząc dedykowaną flagę, aby ustawić wymagany ng-wymagany = "vm.flags.highSchoolRequired == true"

Dodałem oddzwanianie 10 ms po ustawieniu tej flagi i problem został rozwiązany.

 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>

Upewnij się, że wszystkie formanty w formularzu z wymaganym atrybutem mają również ustawiony atrybut name

Ten błąd przydarzył mi się, ponieważ przesyłałem formularz z wymaganymi polami, które nie zostały wypełnione.

Wystąpił błąd, ponieważ przeglądarka próbowała skoncentrować się na wymaganych polach, aby ostrzec użytkownika, że ​​pola są wymagane, ale te wymagane pola zostały ukryte na ekranie, ponieważ nie można się na nich skoncentrować. Przesyłałem z widocznej zakładki, a wymagane pola znajdowały się w ukrytej zakładce, stąd błąd.

Aby to naprawić, sprawdź, czy wymagane pola są wypełnione.

Jest tak, ponieważ w formularzu znajduje się ukryty wkład z wymaganym atrybutem.

W moim przypadku miałem pole wyboru i jest ono ukryte przez tokenizer jquery w stylu wbudowanym. Jeśli nie wybiorę żadnego tokena, przeglądarka zgłasza powyższy błąd podczas przesyłania formularza.

Naprawiłem to za pomocą poniższej techniki css:

  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;

 }

Ten sam błąd wystąpił podczas klonowania elementu HTML do użycia w formularzu.

(Mam częściowo wypełniony formularz, do którego wstrzyknięto szablon, a następnie szablon został zmodyfikowany)

Błąd dotyczył oryginalnego pola, a nie sklonowanej wersji.

Nie mogłem znaleźć żadnych metod, które zmusiłyby formularz do ponownej oceny (w nadziei, że pozbyłby się wszelkich odniesień do starych pól, które teraz nie istnieją) przed uruchomieniem sprawdzania poprawności.

Aby obejść ten problem, usunąłem wymagany atrybut z oryginalnego elementu i dynamicznie dodałem go do sklonowanego pola przed wstrzyknięciem go do formularza. Formularz teraz poprawnie sprawdza sklonowane i zmodyfikowane pola.