Nieprawidłowa Kontrola formularza Z name=' nie jest ustawialna

Dodanie atrybutu novalidate do formularza pomoże:

<form name="myform" novalidate>

W formularzu możesz mieć ukryte dane wejściowe z wymaganym atrybutem.

<input type="hidden" required />

Stąd form nie może skupić się na tym elemencie, musisz usunąć required ze wszystkich ukrytych wejść.

W przypadku, gdy ktoś inny ma ten problem, doświadczyłem tego samego. Jak wspomniano w komentarzach, było to spowodowane przez przeglądarkę próbującą zweryfikować ukryte pola. Szukało pustych pól w formularzu i próbowało skupić się na nich, ale ponieważ były ustawione na display:none;, nie dało rady. 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.
});

W moim przypadku problem polegał na ukryciu input type="radio" required z:

visibility: hidden;

Ten komunikat błędu pokaże również, czy wymagany typ wejściowy radio lub checkbox ma właściwość display: none; CSS.

Jeśli chcesz utworzyć własne wejścia radio / checkbox, gdzie muszą być ukryte w interfejsie i nadal zachować atrybut required, powinieneś zamiast tego użyć:

opacity: 0; CSS property

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

W moim przypadku problem był spowodowany posiadaniem <form>, a następnie <fieldset> jako pierwszego dziecka, które posiada <input> z atrybutem required. Usunięcie <fieldset> rozwiązało problem. Lub możesz zawinąć formularz z nim; jest to dozwolone przez HTML5.

Jestem na Windows 7 x64, Chrome w wersji 43.0.2357.130 m.

Dla mnie dzieje się tak, gdy istnieje pole <select> z wstępnie 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 między przeglądarkami dla elementu zastępczego ( Jak zrobić Element Zastępczy dla pola 'select'?).

Problem pojawia się na 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 wyrzucony. Wystarczy usunąć wymagany atrybut, gdy próbujesz ukryć to pole. Możesz dodać wymagany atrybut w przypadku, gdy chcesz ponownie pokazać pole. W ten sposób Twoja Walidacja nie będzie zagrożona, a jednocześnie błąd nie zostanie wyrzucony.

Możliwe, że masz ukryte (display: none) pola z wymagane atrybutem.

Proszę sprawdzić, czy wszystkie wymagane pola są widoczne dla użytkownika:)

Jeszcze jedna możliwość, Jeśli otrzymujesz błąd na wejściu checkbox. Jeśli pola wyboru używają niestandardowego CSS, który ukrywa domyślny styl i zastępuje go inną stylistyką, spowoduje to również błąd, który nie można ustawić ostrości w Chrome przy błędzie walidacji.

Znalazłem to w moim arkuszu stylów:

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

Prostą poprawką było zastąpienie go tym:

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

Problem z Select2 jQuery

Problem polega na tym, że Walidacja 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 wprowadzić detektor zdarzeń i "invalid" event każdego elementu formularza, aby można było manipulować tuż przed wydarzeniem walidacji 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);          
});

Yea.. Jeśli ukryta Kontrola formularza ma Wymagane pole, to pokazuje ten błąd. Jednym z rozwiązań byłoby wyłączenie tej kontroli formularza . Dzieje się tak, ponieważ zazwyczaj jeśli ukrywasz kontrolę formularza, To dlatego, że nie jesteś zainteresowany jego wartością. Tak więc Ta para wartości Nazwa kontrolna formularza nie zostanie wysłana podczas przesyłania formularza.

Inna możliwa przyczyna i nieuwzględniona we wszystkich poprzednich odpowiedziach, gdy masz zwykły formularz z wymaganymi polami i przesyłasz formularz, a następnie ukryj go bezpośrednio po przesłaniu (za pomocą javascript), nie dając czasu na działanie funkcji walidacji.

Funkcja walidacji spróbuje skupić się na wymaganym polu i pokazać komunikat o błędzie walidacji, ale pole zostało już ukryte, więc "nieprawidłowa Kontrola formularza Z name=" nie jest możliwa." pojawia się!

Edit:

Aby obsłużyć tę sprawę, po prostu dodaj następujący warunek wewnątrz programu obsługi zgłoszenia

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

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

    // Submit and hide form safely
  }

Edit: Explanation

Przypuśćmy, że ukrywasz formularz po przesłaniu, ten kod gwarantuje, że formularz/pola nie zostaną ukryte, dopóki formularz nie stanie się ważny. Tak więc, jeśli pole nie jest poprawne, przeglądarka może skupić się na nim bez problemów, ponieważ to pole jest nadal wyświetlane.

Do użytku kątowego:

Ng-required= "boolean"

Zastosuje atrybut "required" html5 tylko wtedy, gdy wartość jest prawdziwa.

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

Możesz spróbować .removeAttribute("required") dla tych elementów, które są ukryte w czasie ładowania okna. ponieważ jest całkiem prawdopodobne, że dany element jest oznaczony jako ukryty ze względu na javascript (forms tabbed)

Np.

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

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>

Przyszedłem tu, aby odpowiedzieć, że sam wywołałem ten problem, ponieważ nie zamykałem tagu </form> i miałem wiele formularzy na tej samej stronie. Pierwszy formularz rozszerzy się o szukanie walidacji na wejściach formularza z innego miejsca. Ponieważ te formularze są ukryte, wywołały błąd.

Więc 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

Nieprawidłowa Kontrola formularza Z name = 'userId' nie jest możliwa.

Nieprawidłowa Kontrola formularza Z name= 'hasło' nie jest skupienie.

Nieprawidłowa Kontrola formularza Z name = 'confirm' nie jest możliwa.

Istnieje wiele sposobów, aby to naprawić

1. Dodaj novalidate do formularza, ale jego całkowicie błędne, ponieważ usunie walidację formularza, co doprowadzi do błędnych informacji wprowadzanych przez użytkowników.

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

1. Użycie może usunąć wymagany atrybut z wymaganych pól, co jest również błędne, ponieważ usunie walidację formularza po raz kolejny.

   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 puszki wyłącz wymagane pola, gdy nie zamierzasz przesłać formularza, zamiast wykonywać inną opcję. Jest to moim zdaniem zalecane rozwiązanie.

   Jak:

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

Lub wyłączyć go za pomocą kodu javascript / jquery zależy od scenariusza.

Znalazłem ten sam problem przy użyciu Angular JS. Powstał z użycia Wymagane razem z ng-hide. Kiedy kliknąłem na przycisk submit, gdy ten element był ukryty, wystąpił błąd nieprawidłowa Kontrola formularza Z name=" nie jest fokusowalna.Nareszcie!

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

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

Rozwiązałem to, zastępując wymagane ng-pattern zamiast.

Na przykład rozwiązanie:

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

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

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

Chrome nie będzie w stanie znaleźć żadnych pustych, ukrytych i wymaganych elementów, na których można się skupić. Proste Rozwiązanie.

Przyszedłem tu z tym samym problemem. Dla mnie (wtryskiwanie ukrytych elementów w razie potrzeby - np. edukacja w aplikacji pracy) miał wymagane flagi.

Zdałem sobie sprawę, że walidator odpala wstrzykiwany szybciej niż dokument był gotowy, więc narzekał.

Mój oryginalny znacznik ng-wymagany był za pomocą znacznika widoczności (vm.flagi.hasHighSchool).

Rozwiązałem tworząc dedykowaną flagę, aby ustawić wymagane ng-required= " vm.flagi.highSchoolRequired == prawda "

Dodałem 10ms callback przy ustawianiu 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 kontrolki w formularzu z wymaganym atrybutem mają również ustawiony atrybut name

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

Błąd powstał, ponieważ przeglądarka próbowała skupić się na wymaganych polach, aby ostrzec użytkownika pola były wymagane, ale te wymagane pola były ukryte w wyświetlaczu brak div, więc przeglądarka nie mogła skupić się na nich. Składałem z widocznej zakładki i wymagane pola były w zakładce ukrytej, stąd błąd.

Aby naprawić, upewnij się, że kontrolujesz wymagane pola są wypełnione.

Its ponieważ w formularzu jest ukryte wejście z wymaganym atrybutem.

W moim przypadku miałem pole wyboru i jest ono ukryte przez tokenizer jQuery używając stylu inline. Jeśli nie zaznaczę żadnego tokena, przeglądarka rzuca powyższy błąd przy przesyłaniu formularza.

Więc, 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;

 }

Otrzymałem ten sam błąd podczas klonowania elementu HTML do użycia w formularzu.

(mam częściowo wypełniony formularz, który ma wstawiony szablon, a następnie szablon jest modyfikowany)

Błąd odnosił się do oryginalnego pola, a nie do sklonowanej wersji.

Nie mogłem znaleźć żadnych metod, które zmusiłyby formularz do ponownej oceny (w nadziei, że pozbędzie się odniesień do starych pól, które teraz nie istnieją) przed uruchomieniem / align = "left" /

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 sprawdza teraz poprawnie sklonowane i zmodyfikowane pola.

Mój scenariusz, który mam nadzieję nie został pominięty w tym długim ziarnie odpowiedzi, był czymś naprawdę dziwnym.

Mam elementy div, które dynamicznie aktualizują się poprzez okno dialogowe, które są wywoływane w nich, aby załadować i uzyskać aktywację.

W skrócie identyfikatory div miały

<div id="name${instance.username}"/>

Miałem użytkownika: 测试帐户 i z jakiegoś powodu kodowanie zrobiło jakieś dziwne rzeczy w świecie Java Script. Dostałem ten Komunikat o błędzie dla formularza działającego w innych miejscach.

Zawęziłem go do tego i ponownie przetestowałem użycie zamiast tego pojawiają się numery numeryczne, tj. id, aby rozwiązać problem.

Są rzeczy, które wciąż mnie zaskakują... Mam formę z dynamicznym zachowaniem dla dwóch różnych Bytów. Jedna jednostka wymaga pól, których nie ma druga. Więc mój kod JS, w zależności od podmiotu, robi coś takiego: $('#periodo').removeAttr ("required"); $("#periodo-container").hide ();

I gdy użytkownik wybierze inny podmiot: $("#periodo-container").Pokaż(); $('#periodo').prop ("required", true);

Ale czasami, gdy formularz jest złożony, problem apppears: "nieprawidłowa Kontrola formularza z nazwa = periodo" nie jest fokusable(używam tej samej wartości dla id i nazwa).

Aby rozwiązać ten problem, musisz mieć pewność, ż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

Dla innych AngularJS 1.x użytkownicy tam, ten błąd pojawił się, ponieważ ukrywałem kontrolę formularza przed wyświetlaniem zamiast usuwać ją całkowicie z DOM, gdy nie potrzebowałem kontroli do ukończenia.

Naprawiłem to używając ng-if zamiast ng-show/ng-hide na div zawierającym kontrolę formularza wymagającą walidacji.

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

W moim przypadku..

ng-show był używany.
ng-if został umieszczony na swoim miejscu i naprawił mój błąd.

1> Adding a novalidate attribute to the form will help:
it will remove the  validation 


<form name="userForm" id="userForm" novalidate>

2> it can be issue of id or name value , it was already using somewhere 
change the value of id   and name 
2nd point help to fix the error