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


671

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?


11
Jeśli uważasz, że może to wynikać z ukrytych wymaganych pól, może powinieneś sprawdzić, czy w niektórych przypadkach pola te pozostają puste? Na przykład, jeśli wypełnisz user_id z sesji lub coś podobnego, w niektórych przypadkach może pozostać puste?
dkasipovic

1
Zgoda. Otwórz konsolę programisty (F12) w Google Chrome i sprawdź wartości pól, aby sprawdzić, czy wartości tych pól są puste.
Vanilla Thrilla

Dziękuję za Twój komentarz. Nie robi mi to jednak żadnego sensu? Mam prosty formularz asp.net, który używa formantów formularza asp.net. Kontrolki wejściowe są generowane przez framework.
mp1990

Sprawdziłem i w polach wejściowych są wartości. Mam jedno ukryte pole wejściowe, które również ma wartość.
mp1990

3
Myślę, że dzieje się tak, gdy pole jest wymagane, ale ogólnie nie jest „widoczne”. Przydarzyło mi się to w formie podzielonej na kilka zakładek. Pole, które spowodowało błąd, znajduje się na karcie, która nie jest aktywna w chwili przesłania.
Usunąłem

Odpowiedzi:


817

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


2
Ten problem może powstać, gdy strona zostanie zbudowana i przetestowana w przeglądarce, która nie obsługuje sprawdzania poprawności po stronie klienta lub nie uniemożliwia przesłania formularza (patrz Safari). Następny programista lub użytkownik z przeglądarką, która faktycznie uniemożliwia przesłanie formularza po błędach po stronie klienta (patrz Chrome; nawet w przypadku ukrytych elementów formularza) napotyka problem niedostępnego formularza, ponieważ nie można przesłać formularza i nie otrzymuje żadnej wiadomości przeglądarka lub witryna. Całkowite zapobieganie sprawdzaniu poprawności za pomocą „novalidate” nie jest poprawną odpowiedzią, ponieważ sprawdzanie poprawności po stronie klienta powinno wspierać dane wejściowe użytkownika. Zmiana strony internetowej jest rozwiązaniem.
graste

4
Dziękuję za szczegółową odpowiedź. Pominięcie requiredlub dodanie novalidatenigdy nie jest dobrym obejściem.
fatCop

2
To powinna być poprawna odpowiedź. Jeśli używasz sprawdzania poprawności po stronie klienta HTML5, dodanie nowelizacji rozwiązuje jeden problem podczas tworzenia drugiego. Aby źle Chrome chce zweryfikować dane wejściowe, które nie są pokazane (a zatem nie powinny być wymagane).
kheit

1
Po prostu pozostawiając przykład w moim przypadku, miałem ukryte numberpole, w którym domyślna wartość nie była podzielna równomiernie przez rozmiar kroku. Zmiana rozmiaru kroku rozwiązała problem.
James Scott

3
@IgweKalu dobre połączenie. Natknąłem się na tę implementację TinyMCE na polu tekstowym. TinyMCE ukrywa oryginalne pole formularza (które było „wymagane”) i wyzwala ten błąd. Rozwiązanie, usuń teraz ukryty „wymagane” atrybut z formularza i opierają się na innej metody, aby upewnić się, że jest wypełniony w.
J

355

Dodanie novalidateatrybutu do formularza pomoże:

<form name="myform" novalidate>

41
To nie jest zagrożenie bezpieczeństwa. (Poleganie na kontroli po stronie klienta jest.) Jest to problem z użytecznością.
Jukka K. Korpela,

9
Próbowałem i okazało się, że „nowość” nie jest wymagana! Właśnie nadałem swojemu formularzowi nazwę i wszystko działało dobrze!
Sunny Sharma,

33
Próbowałem i stwierdziłem, że „nowość” jest rzeczywiście wymagana. Tylko dodanie nazwy formularza nie działa.
Jeff Tian

13
Dodanie novalidate zatrzymuje również sprawdzanie poprawności po stronie klienta, na przykład za pomocą klejnotu Rails Simple Form. Lepiej, aby pola problemów nie były wymagane, zgodnie z odpowiedzią Ankita + komentarz Davida Brunowa.
stal

9
Odkryłem, że „Niepoprawna kontrola formularza o nazwie =” nie może być aktywowana. ” pokazuje również, czy dane wejściowe są w<fieldset>
oscargilfc

260

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.


7
Zauważyłem, że może się to zdarzyć również w przypadku pól typu „e-mail” ustawionych na brak wyświetlania, co jest problemem spowodowanym przez próbę sprawdzenia poprawności formatu przez Chrome.
David Brunow

3
To nie musi mieć required. patternsam może powodować ten problem.
Pacerier

3
W moim przypadku pola formularza nie były typu = "ukryte", były po prostu niewidoczne, np. W formie z zakładkami.
Josh Mc

Mam dwie formy, jedną z jedną <input type="hidden" required />i drugą z <input type="text" style="display: none" required />, a jedyną, która wyświetla błąd w Chrome, jest ta display: none, podczas gdy ta jest w "hidden"porządku.
Pere

To jest poprawna odpowiedź. Chrome próbuje zweryfikować pole, które zostało ukryte w CSS. Zapobiega wyświetlaniu komunikatu ostrzegawczego dotyczącego sprawdzania poprawności i ostrzega o tym fakcie.
superluminarny

33

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


6
Jeśli masz ochotę zagłosować na tę odpowiedź, zostaw komentarz, aby poinformować mnie dlaczego. Wolę usunąć odpowiedź, jeśli zawiera ona złe informacje, niż pozostawić ją tutaj i wprowadzić w błąd społeczność.
Horatio Alderaan

1
Nie oddam głosu, ale czuję, że ten kod używa brutalnej siły „maskowania problemu”. Z pewnością jest przydatny w przypadku starszego kodu, ale w przypadku nowszych projektów zaleciłbym przyjrzenie się problemowi nieco bardziej. Ta odpowiedź dotyczy także użycia słowa „nowotwory” w znaczniku formularza, ale jest to trochę bardziej widoczne. +1 za wyłączone zamiast wymaganego usuwania.
Jonathan DeMarks

1
Aby dać trochę kontekstu, byłem dokładnie w sytuacji „radzenia sobie ze starszym kodem”, kiedy napotkałem ten problem. W pełni zgadzam się, że to hack. Znacznie lepiej zaprojektować znaczniki, aby nie spotkać się z tą sytuacją. Jednak w przypadku starszych baz kodu i nieelastycznych systemów CMS nie zawsze jest to możliwe. Powyższe podejście polegające na wyłączeniu zamiast używania „nowicjatu” było najlepszym sposobem, w jaki mogłem wymyślić rozwiązanie problemu.
Horatio Alderaan,

2
Zgadzam się z podejściem polegającym na wyłączaniu ukrytych pól. Usunięcie ich „wymaganych” atrybutów powoduje utratę informacji, jeśli zostaną pokazane później. Jednak ponowne włączenie ich zatrzymałoby to.
Druckles

1
Uwielbiam to rozwiązanie i myślę, że działa dobrze, gdy masz formularz z danymi wejściowymi, które są zmiennie wyświetlane lub ukryte na podstawie wybranych wartości innych danych wejściowych. Pozwala to zachować wymagane ustawienia i nadal umożliwia przesłanie formularza. Co więcej, jeśli sprawdzanie poprawności nie powiedzie się, a użytkownik zrobi coś zupełnie innego, nie są potrzebne żadne dodatkowe resetowania.
lewsid

17

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


ten sam problem z wyjątkiem tego, że korzystam z biblioteki selectivity.js, która ukrywa bieżące pole wyboru i pokazuje alternatywne pole js z js i css. gdy używam wymagane na nim generuje ten błąd form-field.js: 8 create: 1 Niepoprawne formant formularza o nazwie = 'listing_id' nie można ustawić. cny sugestion jak mogę to naprawić.
Inzmam ul Hassan

@InzmamGujjar, tak jak rozumiem, twoja wtyczka js tworzy kolejne wybrane wejście z własnymi klasami. Może zmieniając klasy CSS wtyczki lub wybierając utworzone wejście name=""zamiast oryginalnego?
Gus,

13

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


Miałem ten sam problem, dziękuję za podpowiedź. Udało się to rozwiązać za pomocą twojego rozwiązania, to dziwne.
Ben

Dziękuję, to był problem również w moim przypadku.
fantasticrice

w moim przypadku ta wskazówka mi pomoże
Anja Ishmukhametova

2
Zestawy terenowe również były moim problemem. W moim przypadku odpowiedź została znaleziona tutaj: stackoverflow.com/a/30785150/1002047 Wygląda na błąd Chrome (ponieważ dany HTML sprawdza poprawność za pomocą walidatora W3C). Po prostu zmiana moich zestawów pól na divs rozwiązała problem.
Eric S. Bullington

@ EricS.Bullington dzięki za wskazanie. Nie znałem tej odpowiedzi; jako ten użytkownik sam odkryłem, że „kroję” fragmenty mojej formy. Nawiasem mówiąc, nie wiem o systemie numeracji wersji Chrome, ale od 124 do 130 w ciągu 4 lat nie wygląda na ogromny krok ...
Pere

9

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

To było również rozwiązanie, które okazało się najlepsze. Umożliwia wyświetlanie komunikatu o błędzie w pobliżu niewidocznych kontrolek formularza.
Rob

8

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

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


7

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.


7

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.


Podpowiedź: $("input").attr("required", "true"); czy $("input").prop('required',true);przeciwnie można atrybut / nieruchomość . >> Do pól wejściowych wymagane jest dodanie jQueryremove
fWd82

7

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

3

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>

wiem, że tak samo, po prostu robię przykład, niektórzy ludzie rozumieją lepiej dzięki kodom: D
Robert

3

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.


1
Dzięki za ten pomysł! Przydało mi się przełączanie WSZYSTKICH czasami ukrytych elementów formularza, niezależnie od tego, czy poszczególne są wymagane, czy nie, więc moja logika jest ładna i prosta :)
Gabe Kopley

3

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


3

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.


3

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.



2

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

2

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.


2

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>

  1. 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">

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


2

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

1

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.


1

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

1

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


Mój został rozwiązany w podobny sposób, ale konfiguracja była min='-9999999999.99' max='9999999999.99'.
Ricardo Green

0

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.


0

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>

Twoje rozwiązanie jest bardzo, bardzo ryzykowne. Każdy, kto ma wolne procesory, nadal otrzyma ten sam błąd. To (lub będzie) typowy stan wyścigu. Prawdopodobnie dotyczy to starych smartfonów. Zachowaj więc ostrożność przy tym rozwiązaniu.
Drachenfels

0

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


0

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.


0

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;

 }

0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.