Un controllo modulo non valido con nome = '' non è attivabile

Ho un problema acuto sul mio sito web. In Google Chrome alcuni clienti non sono in grado di passare alla mia pagina di pagamento. Quando provo a inviare un modulo ottengo questo errore:

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

Questo è dalla console JavaScript.

Ho letto che il problema potrebbe essere dovuto ai campi nascosti con l'attributo richiesto. Ora il problema è che stiamo utilizzando i validatori di campo obbligatori dei moduli web .net e non l'attributo html5 richiesto.

Sembra casuale chi ottiene questo errore. C'è qualcuno che conosce una soluzione per questo?

Questo problema si verifica su Chrome se un campo modulo non riesce a convalidare, ma a causa del rispettivo controllo non valido non focalizzabile il tentativo del browser di visualizzare il messaggio "Compila questo campo" accanto ad esso non riesce.

Un controllo modulo potrebbe non essere focalizzabile al momento dell'attivazione della convalida per diversi motivi. I due scenari descritti di seguito sono le cause più importanti:

• Il campo è irrilevante in base al contesto attuale della logica aziendale. In un tale scenario, il rispettivo controllo dovrebbe essere rimosso dal DOM o non dovrebbe essere contrassegnato con l' requiredattributo in quel punto.

• La convalida prematura può verificarsi a causa di un utente che preme il tasto INVIO su un input. Oppure un utente che fa clic su un pulsante / controllo di input nel modulo che non ha definito typecorrettamente l' attributo del controllo. Se l'attributo type di un pulsante non è impostato su button, Chrome (o qualsiasi altro browser per quella materia) esegue una convalida ogni volta che si fa clic sul pulsante perché submitè il valore predefinito dell'attributo di un pulsante type.

  Per risolvere il problema, se si dispone di un pulsante sulla pagina che fa qualcosa di altro che presentare o di reset , ricordarsi sempre di fare questo: <button type="button">.

Vedi anche https://stackoverflow.com/a/7264966/1356062

L'aggiunta di un novalidateattributo al modulo aiuterà:

<form name="myform" novalidate>

Nella vostra form, si potrebbe avere nascosto inputavere requiredattributi:

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

Non formpuoi concentrarti su quegli elementi, devi rimuovere requiredda tutti gli input nascosti o implementare una funzione di validazione in javascript per gestirli se hai davvero bisogno di un input nascosto.

Nel caso in cui qualcun altro abbia questo problema, ho sperimentato la stessa cosa. Come discusso nei commenti, era dovuto al tentativo del browser di convalidare i campi nascosti. Stava trovando campi vuoti nella forma e cercava di focalizzarsi su di essi, ma poiché erano impostati su display:none;, non poteva. Da qui l'errore.

Sono stato in grado di risolverlo usando qualcosa di simile a questo:

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

Inoltre, questo è probabilmente un duplicato di "Controllo modulo non valido" solo in Google Chrome

Nel mio caso il problema era con l' input type="radio" requiredessere nascosto con:

visibility: hidden;

Questo messaggio di errore mostrerà anche se il tipo di input richiesto radioo checkboxha una display: none;proprietà CSS.

Se si desidera creare input radio / casella di controllo personalizzati in cui devono essere nascosti dall'interfaccia utente e mantenere comunque l' requiredattributo, è necessario utilizzare invece:

opacity: 0; Proprietà CSS

Nessuna delle risposte precedenti ha funzionato per me e non ho campi nascosti con l' requiredattributo.

Nel mio caso, il problema è stato causato dall'avere a <form>e quindi a <fieldset>come primo figlio, che contiene <input>l' requiredattributo. Rimozione del <fieldset>risolto il problema. Oppure puoi avvolgere il tuo modulo con esso; è consentito da HTML5.

Sono su Windows 7 x64, versione Chrome 43.0.2357.130 m.

Ancora un'altra possibilità se stai ricevendo l'errore su un input della casella di controllo. Se le tue caselle di controllo utilizzano CSS personalizzati che nascondono il valore predefinito e lo sostituiscono con qualche altro stile, ciò attiverà anche l'errore non focalizzabile in Chrome su errore di convalida.

Ho trovato questo nel mio foglio di stile:

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

La soluzione semplice era sostituirla con questa:

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

Può essere che tu abbia campi nascosti (display: none) con l' attributo richiesto .

Verifica che tutti i campi richiesti siano visibili all'utente :)

Per me questo succede, quando c'è un <select>campo con opzione preselezionata con valore di '':

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

Sfortunatamente è l'unica soluzione cross-browser per un segnaposto ( Come faccio a creare un segnaposto per una casella 'seleziona'? ).

Il problema si presenta su Chrome 43.0.2357.124.

Se si dispone di un campo con l'attributo richiesto che non è visibile durante l'invio del modulo, verrà generato questo errore. È sufficiente rimuovere l'attributo richiesto quando si tenta di nascondere quel campo. È possibile aggiungere l'attributo richiesto nel caso in cui si desideri visualizzare nuovamente il campo. In questo modo, la tua convalida non sarà compromessa e allo stesso tempo, l'errore non verrà generato.

Per il problema di Select2 Jquery

Il problema è dovuto alla convalida HTML5 che non può focalizzare un elemento non valido nascosto. Mi sono imbattuto in questo problema quando avevo a che fare con il plugin jQuery Select2.

Soluzione È possibile iniettare un listener di eventi e un evento "non valido" di ogni elemento di un modulo in modo da poterlo manipolare poco prima dell'evento di convalida 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);          
});

Mostrerà quel messaggio se hai un codice come questo:

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

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

Sì. Se un controllo modulo nascosto ha richiesto un campo, mostra questo errore. Una soluzione sarebbe disabilitare questo controllo del modulo . Questo perché di solito se si nasconde un controllo modulo è perché non si è interessati al suo valore. Pertanto, questa coppia valore nome controllo modulo non verrà inviata durante l'invio del modulo.

Puoi provare .removeAttribute("required")per quegli elementi che sono nascosti al momento del caricamento della finestra. poiché è abbastanza probabile che l'elemento in questione sia contrassegnato nascosto a causa di javascript (moduli a schede)

per esempio

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

Questo dovrebbe fare il compito.

Ha funzionato per me ... evviva

Un'altra possibile causa e non trattata in tutte le risposte precedenti quando si dispone di un modulo normale con campi obbligatori e si invia il modulo, quindi lo si nasconde direttamente dopo l'invio (con javascript) non dando tempo per il funzionamento della funzionalità di convalida.

La funzionalità di convalida proverà a focalizzarsi sul campo richiesto e mostrerà il messaggio di convalida dell'errore ma il campo è già stato nascosto, quindi "Un controllo modulo non valido con nome = '' non è focalizzabile." appare!

Modificare:

Per gestire questo caso è sufficiente aggiungere la seguente condizione all'interno del gestore di invio

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

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

    // Submit and hide form safely
  }

Modifica: spiegazione

Supponendo che stai nascondendo il modulo al momento dell'invio, questo codice garantisce che il modulo / i campi non saranno nascosti fino a quando il modulo non sarà valido. Quindi, se un campo non è valido, il browser può concentrarsi su di esso senza problemi poiché questo campo è ancora visualizzato.

Ci sono cose che mi sorprendono ancora ... Ho una forma con comportamento dinamico per due entità diverse. Un'entità richiede alcuni campi che l'altra no. Quindi, il mio codice JS, a seconda dell'entità, fa qualcosa del tipo: $ ('# periodo'). RemoveAttr ('richiesto'); $ ( "# Periodo-contenitore") hide ().;

e quando l'utente seleziona l'altra entità: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('richiesto', vero);

Ma a volte, quando viene inviato il modulo, viene visualizzato il problema: "Un controllo modulo non valido con nome = periodo '' non è focalizzabile (sto usando lo stesso valore per l'id e il nome).

Per risolvere questo problema, devi assicurarti che l'input in cui stai impostando o rimuovendo 'richiesto' sia sempre visibile.

Quindi, quello che ho fatto è:

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

Questo ha risolto il mio problema ... incredibile.

Nel mio caso..

ng-showera in uso.
ng-ifè stato messo al suo posto e risolto il mio errore.

Per uso angolare:

ng-required = "booleano"

Questo applicherà l'attributo html5 'richiesto' solo se il valore è vero.

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

Sono venuto qui per rispondere che avevo innescato questo problema da solo in base alla NON chiusura del </form>tag e alla presenza di più moduli nella stessa pagina. Il primo modulo si estenderà per includere la ricerca della convalida sugli input del modulo da altrove. Poiché QUESTI moduli sono nascosti, hanno causato l'errore.

quindi ad esempio:

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

trigger

Un controllo modulo non valido con nome = 'userId' non è attivabile.

Un controllo modulo non valido con nome = 'password' non è attivabile.

Un controllo modulo non valido con nome = 'confirm' non è focalizzabile.

Ci sono molti modi per risolvere questo problema

1. Aggiungi novalidate al tuo modulo ma è totalmente sbagliato in quanto rimuoverà la convalida del modulo che porterà a informazioni errate immesse dagli utenti.

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

2. L'uso può rimuovere l'attributo richiesto dai campi obbligatori, che è anche sbagliato in quanto rimuoverà nuovamente la convalida del modulo.

   Invece di questo:

<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. L'uso può disabilitare i campi richiesti quando non si intende inviare il modulo invece di fare qualche altra opzione. Questa è la soluzione raccomandata secondo me.

   piace:

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

o disabilitarlo tramite il codice javascript / jquery dipende dal tuo scenario.

Ho riscontrato lo stesso problema durante l'utilizzo di Angular JS. È stato causato dall'uso richiesto insieme a ng-hide . Quando ho fatto clic sul pulsante di invio mentre questo elemento era nascosto, si è verificato l'errore Un controllo modulo non valido con nome = '' non è attivabile. finalmente!

Ad esempio, usando ng-hide insieme a richiesto:

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

L'ho risolto sostituendo invece il richiesto con ng-pattern.

Ad esempio di soluzione:

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

Per gli altri utenti di AngularJS 1.x, questo errore è apparso perché nascondevo un controllo del modulo dalla visualizzazione anziché rimuoverlo completamente dal DOM quando non avevo bisogno del completamento del controllo.

Ho risolto questo problema usando ng-ifinvece di ng-show/ng-hide sul div contenente il controllo del modulo che richiede la convalida.

Spero che questo ti aiuti agli altri utenti del caso limite.

Consentitemi di affermare il mio caso poiché era diverso da tutte le soluzioni di cui sopra. Ho avuto un tag HTML che non è stato chiuso correttamente. l'elemento non required lo era, ma era incorporato in un hiddendiv

il problema nel mio caso riguardava il fatto type="datetime-local"che, per qualche ragione, era stato convalidato alla presentazione del modulo.

ho cambiato questo

<input type="datetime-local" />

in quello

<input type="text" />

Volevo rispondere qui perché NESSUNA di queste risposte o qualsiasi altro risultato di Google ha risolto il problema per me.

Per me non aveva nulla a che fare con i set di campi o gli input nascosti.

Ho scoperto che se avessi usato max="5"(ad esempio) avrebbe prodotto questo errore. Se avessi usato maxlength="5" ... nessun errore.

Sono stato in grado di riprodurre più volte l'errore e la cancellazione dell'errore.

Io ancora non so perché utilizzando il codice che genera l'errore, per quanto questo gli stati dovrebbe essere valida, anche senza un "min" Io credo.

In alternativa, un'altra risposta infallibile è utilizzare l'attributo segnaposto HTML5, quindi non sarà necessario utilizzare alcuna convalida js.

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

Chrome non sarà in grado di trovare elementi vuoti, nascosti e richiesti su cui concentrarsi. Soluzione semplice.

Spero che aiuti. Sono totalmente risolto con questa soluzione.

Sono venuto qui con lo stesso problema. Per me (iniettando elementi nascosti in base alle esigenze, ad esempio istruzione in un'app di lavoro), avevo le bandiere richieste.

Quello che ho capito è che il validatore stava sparando sull'iniezione più velocemente di quanto il documento fosse pronto, quindi si è lamentato.

Il mio tag originale richiesto ng stava usando il tag di visibilità (vm.flags.hasHighSchool).

Ho risolto creando un flag dedicato per impostare ng-richiesto = "vm.flags.highSchoolRequired == true" richiesto

Ho aggiunto un callback di 10ms sull'impostazione di quel flag e il problema è stato risolto.

 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>

Assicurarsi che tutti i controlli nel modulo con l'attributo richiesto abbiano anche l'attributo nome impostato

Questo errore mi è successo perché stavo inviando un modulo con campi obbligatori che non erano stati compilati.

L'errore è stato generato perché il browser stava tentando di focalizzarsi sui campi obbligatori per avvisare l'utente che i campi erano obbligatori ma quei campi obbligatori erano nascosti in una visualizzazione senza div in modo che il browser non potesse concentrarsi su di essi. Stavo inviando da una scheda visibile e i campi richiesti erano in una scheda nascosta, quindi l'errore.

Per risolvere, assicurati di controllare che i campi richiesti siano compilati.

È perché c'è un input nascosto con l'attributo richiesto nel modulo.

Nel mio caso, avevo una casella selezionata ed è nascosta dal tokenizer jquery usando lo stile in linea. Se non seleziono alcun token, il browser genera l'errore sopra riportato all'invio del modulo.

Quindi, l'ho risolto usando la tecnica css di seguito:

  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;

 }

Ho ricevuto lo stesso errore durante la clonazione di un elemento HTML da utilizzare in un modulo.

(Ho un modulo parzialmente completo, in cui è stato inserito un modello, quindi il modello viene modificato)

L'errore si riferiva al campo originale e non alla versione clonata.

Non sono riuscito a trovare alcun metodo che costringesse il modulo a rivalutarsi (nella speranza che si sbarazzasse di qualsiasi riferimento ai vecchi campi che ora non esistono) prima di eseguire la convalida.

Per ovviare a questo problema, ho rimosso l'attributo richiesto dall'elemento originale e l'ho aggiunto dinamicamente al campo clonato prima di iniettarlo nel modulo. Il modulo ora convalida correttamente i campi clonati e modificati.