Een ongeldige vormregeling met naam = ” is niet focustable

In Google Chrome kunnen sommige klanten niet doorgaan naar mijn betaalpagina.
Bij het indienen van een formulier krijg ik deze foutmelding:

Een ongeldige vormregeling met naam = ” is niet focustable.

Dit komt uit de JavaScript-console.

Ik heb gelezen dat het probleem zou kunnen zijn aan verborgen velden met het vereiste kenmerk.
Nu is het probleem dat we .NET WEBFORMS vereiste veldvaltators, en niet het vereiste kenmerk HTML5.

Het lijkt willekeurig wie deze fout krijgt.
Is er iemand die hiervoor een oplossing kent?

1, Autoriteit 100%

Dit probleem treedt op bij Chrome als een formulierveld mislukt validatie, maar vanwege de respectieve ongeldige bediening die niet focusbaar is, de poging van de browser om het bericht “te geven, vult u dit veld in” ernaast mislukt ook.

Een formulierregeling is mogelijk niet focustabel op de tijdvalidatie wordt om verschillende redenen geactiveerd. De hieronder beschreven twee scenario’s zijn de meest prominente oorzaken:

• Het veld is irrelevant volgens de huidige context van de bedrijfslogica. In een dergelijk scenario moet de respectieve regeling worden uitgeschakeld of verwijderd uit de DOM of niet worden gemarkeerd met de requiredkenmerk op dat moment.

• Voortijdige validatie kan optreden doordat een gebruiker op een invoer op de ENTER-toets drukt. Of een gebruiker die op een knop/invoerbesturingselement klikt in de vorm die het kenmerk typevan het besturingselement niet correct heeft gedefinieerd. Als het type-kenmerk van een knop niet is ingesteld op button, voert Chrome (of welke andere browser dan ook) een validatie uit telkens wanneer de op de knop is geklikt omdat submitde standaardwaarde is van het typekenmerk.

Om het probleem op te lossen, als u een knop op uw pagina heeft die iets anders doet dan verzendenof reset, onthoud altijd dit te doen: <button type="button">.

Zie ook https://stackoverflow.com/a/7264966/1356062

Antwoord 2, autoriteit 41%

Het toevoegen van een novalidate-kenmerk aan het formulier helpt:

<form name="myform" novalidate>

Antwoord 3, autoriteit 30%

In uw formheeft u mogelijk verborgen inputmet een required-attribuut:

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

Het formkan zich niet op die elementen concentreren, u moet requiredverwijderen uit alle verborgen invoer, of een validatiefunctie in javascript implementeren om ze af te handelen als u echt vereisen een verborgen invoer.

Antwoord 4, autoriteit 4%

Voor het geval iemand anders dit probleem heeft, ik heb hetzelfde meegemaakt. Zoals besproken in de opmerkingen, was dit te wijten aan het feit dat de browser probeerde verborgen velden te valideren. Het zocht lege velden in het formulier en probeerde daarop te focussen, maar omdat ze waren ingesteld op display:none;, lukte dat niet. Vandaar de fout.

Ik heb het kunnen oplossen door iets soortgelijks als dit te gebruiken:

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

Dit is mogelijk ook een duplicaat van “Ongeldig formulierbeheer” alleen in Google Chrome

Antwoord 5, autoriteit 2%

In mijn geval was het probleem dat het input type="radio" requiredverborgen was met:

visibility: hidden;

Deze foutmelding wordt ook weergegeven als het vereiste invoertype radioof checkboxeen display: none;CSS-eigenschap heeft.

Als u Custom Radio / Checkbox-ingangen wilt maken waar ze moeten worden verborgen voor de UI en nog steeds de requiredAttribuut, moet u in plaats daarvan de:

opacity: 0;CSS-eigenschap

6

Geen van de vorige antwoorden werkte voor mij, en ik heb geen verborgen velden met de requiredattribuut.

In mijn geval werd het probleem veroorzaakt door het hebben van een <form>en vervolgens een <fieldset>als eerste kind, dat de <input>MET DE requiredATTIBUTE. Het verwijderen van de <fieldset>opgelost het probleem. Of je kunt je vorm ermee inpakken; het is toegestaan ​​door HTML5.

Ik ben op Windows 7 X64, Chrome versie 43.0.2357.130 m.

7

Nog een andere mogelijkheid als u de foutmelding krijgt op een checkbox-ingang. Als uw selectievakjes aangepaste CSS gebruiken die de standaard verbergt en vervangt deze met een andere styling, zal dit ook de niet-focusseerbare fout in Chrome op validatiefout activeren.

Ik vond dit in mijn stylesheet:

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

Eenvoudige oplossing was om het hiermee te vervangen:

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

8

Voor mij gebeurt dit, wanneer er een <select>veld met vooraf geselecteerde optie met waarde van ”:

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

Helaas is het de enige cross-browseroplossing voor een tijdelijke aanduiding (Hoe maak ik een tijdelijke aanduiding voor een ‘select’ box? ).

Het probleem komt op chroom 43.0.2357.124.

9

voor select2 jQuery probleem

Het probleem is te wijten aan de HTML5-validatie kan een verborgen ongeldig element niet richten.
Ik kwam dit probleem tegen toen ik te maken had met JQuery Select2-plug-in.

oplossing
U kunt een evenement luisteraar injecteren en ‘ongeldig’ gebeurtenis van elk element van een formulier, zodat u net vóór de HTML5-gebeurtenis kunt manipuleren.

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

10

Het kan zijn dat u verborgen hebt (display: geen) velden met de vereist attribuut.

Controleer alle vereiste velden zijn zichtbaar voor de gebruiker 🙂

11

Als u een veld hebt met een gewenste kenmerk dat niet zichtbaar is tijdens de indiening van het formulier, wordt deze fout gegooid. U verwijdert gewoon het vereiste attribuut wanneer u dit veld probeert te verbergen. U kunt het gewenste kenmerk toevoegen in het geval dat u het veld opnieuw wilt weergeven. Op deze manier zal uw validatie niet in gevaar worden gebracht en tegelijkertijd wordt de fout niet gegooid.

12

Niet alleen requiredField zoals vermeld in andere antwoorden. Het is ook veroorzaakt door het plaatsen van een <input>veld in een verborgen <div>die een ongeldige waarde bevat.

Overweeg hieronder voorbeeld,

<div style="display:none;">
   <input type="number" name="some" min="1" max="50" value="0">
</div> 

Dit gooit dezelfde fout. Zorg er dus voor dat de <input>Velden binnen verborgen <div>HOUDT geen ongeldige waarde.

13

Het toont dat bericht als u als volgt hebt:

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

14

Ja.. Als een verborgen formulierbesturingselement een verplicht veld heeft, wordt deze fout weergegeven. Een oplossing zou zijn om dit formulierbeheer uit te schakelen. Dit komt omdat als u een formulierbesturingselement verbergt, dit meestal is omdat u zich niet bezighoudt met de waarde ervan. Dit formuliercontrolenaamwaardepaar wordt dus niet verzonden tijdens het indienen van het formulier.

Antwoord 15

U kunt .removeAttribute("required")proberen voor die elementen die verborgen zijn op het moment dat het venster wordt geladen. aangezien het vrij waarschijnlijk is dat het betreffende element is gemarkeerd als verborgen vanwege javascript (formulieren met tabbladen)

bijv.

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

Dit zou de taak moeten volbrengen.

Het werkte voor mij… proost

Antwoord 16

Een andere mogelijke oorzaak en niet behandeld in alle eerdere antwoorden wanneer u een normaal formulier met verplichte velden heeft en u verzendt het formulier en verbergt het dan direct na het indienen (met javascript), zodat er geen tijd is om de validatiefunctionaliteit te laten werken.

De validatiefunctionaliteit zal proberen zich te concentreren op het vereiste veld en het foutvalidatiebericht te tonen, maar het veld is al verborgen, dus “Een ongeldig formulierbesturingselement met name=” kan niet worden gefocust.” verschijnt!

Bewerken:

Om deze zaak af te handelen, voegt u gewoon de volgende voorwaarde toe aan uw verzendhandler

submitHandler() {
    const form = document.body.querySelector('#formId');
    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }
    // Submit and hide form safely
  }

Bewerken: uitleg

Stel dat u het formulier verbergt bij verzending, deze code garandeert dat het formulier/de velden niet worden verborgen totdat het formulier geldig wordt. Dus als een veld niet geldig is, kan de browser er zonder problemen op focussen omdat dit veld nog steeds wordt weergegeven.

Antwoord 17

Er zijn veel manieren om dit op te lossen, zoals

1. Voeg novalidate toe aan je formulier, maar het is totaal verkeerd omdat het formuliervalidatie zal verwijderen, wat zal leiden tot verkeerde informatie die door de gebruikers wordt ingevoerd.

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

2. Gebruik kan het vereiste kenmerk uit verplichte velden verwijderen, wat ook verkeerd is, omdat het formuliervalidatie opnieuw zal verwijderen.

   In plaats van dit:

<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. Gebruik kan de verplichte velden uitschakelen wanneer u het formulier niet gaat verzenden in plaats van een andere optie te gebruiken. Dit is naar mijn mening de aanbevolen oplossing.

   vind ik leuk:

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

of schakel het uit via javascript / jQuery-code, hangt af van uw scenario.

Antwoord 18

Er zijn dingen die me nog steeds verbazen… Ik heb een formulier met dynamisch gedrag voor twee verschillende entiteiten. De ene entiteit vereist enkele velden die de andere niet nodig heeft.
Dus mijn JS-code, afhankelijk van de entiteit, doet zoiets als:
$ (‘# periodo’). Removeattr (‘Vereist’);
$ (“# periodo-container”). Verberg ();

en wanneer de gebruiker de andere entiteit selecteert:
$ (“# periodo-container”). Show ();
$ (‘# periodo’). Prop (‘verplicht’, true);

Maar soms, wanneer het formulier wordt ingediend, is het probleem AppPears: “Een ongeldige vormregeling met naam = periodo ” is niet focustable (ik gebruik dezelfde waarde voor de ID en de naam).

Om dit probleem op te lossen, moet u verzekeren dat de invoer waar u ‘Verplicht’ instellen of verwijderen altijd zichtbaar is.

Dus, wat ik deed is:

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

Dat is mijn probleem opgelost … ongelooflijk.

19

In mijn geval ..

ng-showwerd gebruikt.
ng-ifop zijn plaats is geplaatst en mijn fout heeft opgelost.

20

Het is raar hoe iedereen suggereert om de validatie te verwijderen, terwijl validatie bestaat om een ​​reden …
Hoe dan ook, hier is wat u kunt doen als u een aangepaste controle gebruikt en de validatie wilt behouden:

1e stap. Verwijder Display Geen van de invoer, dus de input wordt focusable

.input[required], .textarea[required] {
    display: inline-block !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
}

2e stap. Voeg ongeldige gebeurtenishandler toe aan de invoer voor specifieke gevallen als de stijl niet genoeg is

inputEl.addEventListener('invalid', function(e){
   //if it's valid, cancel the event
   if(e.target.value) {
       e.preventDefault();
   }
}); 

Antwoord 21

Voor hoekig gebruik:

ng-required=”boolean”

Hiermee wordt het html5-kenmerk ‘required’ alleen toegepast als de waarde waar is.

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

Antwoord 22

Ik kwam hier om te antwoorden dat ik dit probleem zelf had veroorzaakt op basis van het NIET sluiten van de </form>-tag EN het hebben van meerdere formulieren op dezelfde pagina. Het eerste formulier omvat ook het zoeken naar validatie van formulierinvoer van elders. Omdat DIE formulieren verborgen zijn, hebben ze de fout veroorzaakt.

dus bijvoorbeeld:

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

Triggers

Een ongeldig formulierbesturingselement met name=’userId’ kan niet worden gefocust.

Een ongeldig formulierbesturingselement met name=’password’ kan niet worden gefocust.

Een ongeldig formulierbesturingselement met name=’confirm’ kan niet worden gefocust.

Antwoord 23

Ik heb hetzelfde probleem gevonden bij het gebruik van Angular JS. Het werd veroorzaakt door het gebruik van requiredsamen met ng-hide. Toen ik op de verzendknop klikte terwijl dit element verborgen was, trad de fout Een ongeldig formulierbesturingselement met name=” kan niet worden gefocust.eindelijk!

Bijvoorbeeld van het gebruik van NG-Hide samen met vereist:

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

Ik heb het opgelost door in plaats daarvan de vereiste met NG-patroon te vervangen.

Bijvoorbeeld van oplossing:

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

24

Het is omdat er een verborgen invoer is met het gewenste attribuut in het formulier.

In mijn geval had ik een select vak en het is verborgen door jQuery tokenizer met behulp van inline stijl. Als ik geen token selecteer, gooit de browser de bovenstaande fout op het indienen van formulier.

Dus ik heb het opgelost met behulp van de onderstaande CSS-techniek:

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

25

Niet alleen alleen bij het opgeven van required, ik kreeg dit probleem ook bij gebruik van minen maxE.G.

<input type="number" min="1900" max="2090" />

Die veld kan worden verborgen en getoond op basis van andere radiowaarde. Dus, voor tijdelijke oplossing, heb ik de validatie verwijderd.

26

Laat me mijn zaak zeggen, omdat het anders was dan alle bovenstaande oplossingen. Ik had een HTML-tag die niet correct was gesloten. Het element was niet required, maar het was ingebed in een hiddendiv

Het probleem in mijn geval was met de type="datetime-local", die was – voor wat reden – gevalideerd bij formulierinzending.

Ik heb dit gewijzigd

<input type="datetime-local" />

in dat

<input type="text" />

27

Ik heb deze vraag vaak gevraagd en deze ‘fout’ zelf tegengekomen. Er zijn zelfs links geweest om de vraag of dit een echte bug in Chrome is.
Dit is de reactie die optreedt wanneer een of meer formulierinvoertype-elementen zijn verborgen en deze elementen hebben een min / max-limiet (of een andere validatiebeperking) opgelegd.

Bij het creëren van een vorm zijn er geen waarden die aan de elementen worden toegeschreven, later op de elementwaarden kunnen worden gevuld of ongewijzigd blijven.
Op het moment van dienen, wordt het formulier geparseerd en alle verborgen elementen die buiten deze validatielimieten zijn, deze ‘fout’ in de console en zal de subsidie ​​mislukken. Aangezien u geen toegang hebt tot deze elementen (omdat ze verborgen zijn) is dit de enige reactie die geldig is.

Dit is geen echte fout of bug. Het is een indicatie dat er elementwaarden zijn die op het punt staan te worden ingediend die buiten de limieten vallen die zijn vastgelegd door een of meer elementen.

Om dit op te lossen, wijst u een geldige standaardwaarde toe aan alle elementen die verborgen zijn in het formulier voordat het formulier wordt verzonden, dan zullen deze ‘fouten’ nooit optreden. Het is geen bug als zodanig, het dwingt je alleen maar tot betere programmeergewoonten.

NB: Als u deze waarden wilt instellen op iets buiten de validatielimieten, gebruik dan form.addEventListener(‘submit’, myFunction) om de ‘submit’-gebeurtenis te onderscheppen en vul deze elementen in in “myFunction”. Het lijkt erop dat de validatiecontrole wordt uitgevoerd voordat “myFunction() wordt aangeroepen.

Antwoord 28

Ik wilde hier antwoorden omdat GEEN van deze antwoorden, of enig ander Google-resultaat het probleem voor mij heeft opgelost.

Voor mij had het niets te maken met veldensets of verborgen invoer.

Ik ontdekte dat als ik max="5"(bijv.) zou gebruiken, dit deze fout zou opleveren. Als ik maxlength="5"gebruikte … geen fout.

Ik kon de fout meerdere keren reproduceren en de fout wissen.

Ik weet nog steeds niet waarom het gebruik van die code de fout veroorzaakt, voor zover ditstelt dat het geldig zou moeten zijn, zelfs zonder een “min” geloof ik.

Antwoord 29

Een ander en onfeilbaar antwoord is om het HTML5 Placeholder-attribuut te gebruiken, dan is het niet nodig om js-validaties te gebruiken.

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

Chrome kan geen lege, verborgen en vereiste elementen vinden om op te focussen. Eenvoudige oplossing.

Hoop dat helpt. Ik ben volledig gesorteerd met deze oplossing.