Un contrôle de forme invalide avec nom=" n'est pas focalisable

j'ai un problème aigu sur mon site. Dans Google Chrome certains clients ne sont pas en mesure de procéder à ma page de paiement. En essayant de soumettre un formulaire je reçois cette erreur:

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

ça vient de la console JavaScript.

j'ai lu que le problème pourrait être dû à des champs cachés ayant l'attribut obligatoire. Maintenant, le problème est que nous utilisons les validateurs de champ requis pour les formulaires Web.net, et non l'attribut requis html5.

Il semble aléatoire qui obtient cette erreur. Est-ce que quelqu'un connait une solution pour cela?

491
demandé sur morkro 2014-03-03 17:29:20
la source

30 ответов

il ne suffit pas d'énoncer

Ajouter un attribut novalidate au formulaire aidera

Il n'explique pas le problème, et l'OP peut ne pas avoir compris pourquoi il pourrait l'aider, ou si c'est vraiment utile.

Ici , une réponse qui explique vraiment le cas, la compréhension du problème devrait vous permettre d'arriver à une solution qui convient à votre développement:

Chrome veut se concentrer sur un contrôle qui est nécessaire, mais encore vide, de sorte qu'il peut apparaître le message "Veuillez remplir le champ'. Cependant, si le contrôle est caché au point où Chrome veut faire apparaître le message, c'est-à-dire au moment de la soumission du formulaire, Chrome ne peut pas se concentrer sur le contrôle parce qu'il est caché, donc le formulaire ne sera pas soumis.

donc, pour contourner le problème, quand un contrôle est caché par javascript, nous doit également supprimer l'attribut "required" de ce contrôle.

pour mettre l'avertissement en bonne utilisation, considérez ceci - ne cachez pas un champ quand il ne réussit pas la validation . Mais ce n'est pas une règle stricte, ni est-il une règle à tous. Comme je l'ai mentionné dans mon commentaire ci-dessous, je paraphrase

Dans certains cas, le problème n'est pas un problème du tout et ne cause pas de perte de fonctionnalité dans une application. Puis l'erreur peut-être ignoré.

mise à jour: 21 août 2015

l'erreur en question peut également résulter d'une validation prématurée. La validation prématurée peut se produire lorsque vous avez une entrée <button> sans un ensemble type attribut. Sans l'attribut type d'un bouton étant réglé sur Bouton, Chrome (ou tout autre navigateur d'ailleurs) effectue une validation chaque fois que le bouton est cliqué parce que soumettre est le type par défaut des boutons. Pour résoudre le problème, si vous avez un bouton sur votre page qui fait autre chose que soumettre ou réinitialiser , n'oubliez pas de faire ceci: <button type="button">

577
répondu Igwe Kalu 2017-05-23 15:18:27
la source

Ajouter un attribut novalidate au formulaire aidera:

<form name="myform" novalidate>
318
répondu user2909164 2014-03-03 18:14:53
la source

dans votre forme, vous pourriez avoir l'entrée cachée ayant l'attribut requis.

<input type="hidden" required />

donc la forme ne peut pas se concentrer sur cet élément, vous devez supprimer required de toutes les entrées cachées.

200
répondu Ankit Sharma 2014-04-22 13:16:49
la source

si quelqu'un d'autre a ce problème, j'ai vécu la même chose. Comme indiqué dans les commentaires, cela était dû au fait que le navigateur tentait de valider les champs cachés. Il a trouvé des champs vides dans la forme et essayer de se concentrer sur eux, mais parce qu'ils ont été mis à display:none; , il ne pouvait pas. D'où l'erreur.

j'ai pu le résoudre en utilisant quelque chose de similaire à ceci:

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

aussi, c'est peut-être un duplicata de "Contrôle de forme invalide" seulement dans Google Chrome

25
répondu Horatio Alderaan 2017-05-23 15:02:59
la source

dans mon cas, le problème était que le input type="radio" required était caché avec:

visibility: hidden;

ce message d'erreur indiquera également si le type d'entrée requis radio ou checkbox possède une propriété CSS display: none; .

si vous voulez créer des entrées radio/case à cocher personnalisées où elles doivent être cachées de L'UI et garder l'attribut required , vous devriez plutôt utiliser le:

opacity: 0; propriété CSS

13
répondu Gus 2017-04-25 22:45:17
la source

aucune des réponses précédentes n'a fonctionné pour moi, et je n'ai pas de champs cachés avec l'attribut required .

dans mon cas, le problème a été causé par avoir un <form> et puis un <fieldset> comme premier enfant, qui tient le <input> avec l'attribut required . La suppression du <fieldset> a résolu le problème. Ou vous pouvez envelopper votre forme avec elle; il est permis par HTML5.

je suis sous Windows 7 x64, Version Chrome 43.0.2357.130 M.

12
répondu Pere 2015-07-03 01:42:59
la source

pour moi cela arrive, quand il y a un champ <select> avec option pré-sélectionnée avec valeur de":

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

malheureusement, C'est la seule solution de navigateur croisée pour un conteneur ( Comment faire un conteneur pour une boîte 'select'? ).

le problème apparaît sur Chrome 43.0.2357.124.

7
répondu piotr_cz 2017-05-23 15:34:53
la source

si vous avez un champ avec l'attribut requis qui n'est pas visible lors de la soumission du formulaire, cette erreur sera lancée. Vous supprimez simplement l'attribut requis lorsque vous essayez de cacher ce champ. Vous pouvez ajouter l'attribut requis dans le cas où vous voulez montrer le champ à nouveau. De cette manière, votre validation ne sera pas compromise et, dans le même temps, l'erreur ne sera pas levée.

7
répondu maniempire 2015-08-27 20:23:01
la source

il se peut que vous ayez caché (display: none) des champs avec l'attribut required .

Veuillez vérifier que tous les champs requis sont visibles à l'utilisateur :)

6
répondu ghuroo 2017-04-07 17:47:54
la source

encore une autre possibilité si vous obtenez l'erreur sur une entrée de case. Si vos cases à cocher utilisent des CSS personnalisés qui masquent la valeur par défaut et la remplacent par un autre style, cela déclenchera également l'erreur non focalisable dans Chrome on validation error.

j'ai trouvé ceci dans ma feuille de style:

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

solution Simple est de le remplacer par ceci:

input[type="checkbox"] {
    opacity: 0;
}
5
répondu Sam 2015-12-15 18:52:37
la source

Pour Select2 Jquery problème

le problème est dû au fait que la validation HTML5 ne peut pas focaliser un élément non valide caché. Je suis tombé sur ce problème lorsque je traitais avec jQuery Select2 plugin.

Solution Vous pouvez injecter un écouteur d'événement sur et un événement "invalide" de chaque élément d'un formulaire pour que vous puissiez manipuler juste avant l'événement de validation 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);          
});
5
répondu SudarP 2016-04-05 08:53:12
la source

Oui.. Si un contrôle de formulaire caché a demandé le champ alors il montre cette erreur. Une solution serait de désactiver ce contrôle de forme . C'est parce que généralement si vous cachez un contrôle de forme c'est parce que vous n'êtes pas concernés par sa valeur. Ainsi, cette paire de valeur de nom de contrôle de formulaire ne sera pas envoyé lors de la soumission du formulaire.

3
répondu Kartik Shenoy 2016-06-11 12:49:23
la source

une autre cause possible et non couverte dans toutes les réponses précédentes lorsque vous avez un formulaire normal avec les champs requis et vous soumettez le formulaire puis le cacher directement après la soumission (avec javascript) ne donnant pas le temps à la fonctionnalité de validation de fonctionner.

la fonctionnalité de validation va essayer de se concentrer sur le champ requis et afficher le message de validation d'erreur, mais le champ a déjà été caché, donc" un contrôle de formulaire invalide avec nom= " n'est pas focalisable." apparaît!

Edit:

pour gérer ce cas il suffit d'ajouter la condition suivante à l'intérieur de votre gestionnaire soumettre

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

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

    // Submit and hide form safely
  }

Modifier: Explication

en supposant que vous cachez le formulaire lors de la soumission, ce code garantit que le formulaire/les champs ne seront pas cachés jusqu'à ce que le formulaire devienne valide. Donc, si un champ n'est pas valide, le navigateur peut se concentrer sur elle sans aucun problème comme ce champ est toujours affiché.

3
répondu Mouneer 2017-07-25 02:06:56
la source

pour un usage angulaire:

ng-requis="boolean"

ceci n'appliquera l'attribut HTML5 'required' que si la valeur est vraie.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
2
répondu Nick Taras 2015-09-07 05:53:23
la source

Vous pouvez essayer .removeAttribute("required") pour les éléments qui sont cachés au moment de la fenêtre de chargement. comme il est assez probable que l'élément en question est marqué caché en raison de javascript (onglets formes)

p.ex.

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

cela devrait faire la tâche.

ça a marché pour moi... cheers

2
répondu utkarshk 2016-08-02 18:27:12
la source

il affichera ce message si vous avez le code suivant:

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

  <input type="submit"/>
</form>
1
répondu Robert 2015-01-26 06:38:58
la source

je suis venu ici pour répondre que j'avais déclenché ce problème moi-même basé sur le fait de ne pas fermer l'étiquette </form> et d'avoir plusieurs formulaires sur la même page. Le premier formulaire s'étendra pour inclure la recherche de validation sur les entrées de formulaires provenant d'ailleurs. Parce que ces formulaires sont cachés, ils ont déclenché l'erreur.

ainsi par exemple:

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

déclencheurs

un contrôle de forme invalide avec nom= 'userId' n'est pas peut recevoir le focus.

un contrôle de formulaire invalide avec nom='Mot de passe' n'est pas focalisable.

un contrôle de forme invalide avec nom='confirm' n'est pas focalisable.

1
répondu Frankenmint 2017-02-21 05:08:09
la source

il y a plusieurs façons de corriger cela comme

  1. ajouter novalidate à votre formulaire mais c'est totalement erroné car il supprimera la validation du formulaire qui conduira à des informations erronées entrées par les utilisateurs.

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

  1. L'utilisation peut supprimer l'attribut requis dans les champs requis, ce qui est également erroné car il supprimera la validation du formulaire une fois de plus.

    Au lieu de cela:

<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. utiliser peut désactiver les champs requis lorsque vous n'allez pas soumettre le formulaire au lieu de faire une autre option. C'est la solution recommandée, à mon avis.

    comme:

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

ou le désactiver par le code javascript / jquery dépend de votre scénario.

1
répondu Umar Asghar 2017-11-18 13:11:53
la source

j'ai trouvé le même problème en utilisant Angular JS. Il a été causé en utilisant requis avec ng-hide . Lorsque j'ai cliqué sur le bouton Soumettre alors que cet élément était caché alors il s'est produit l'erreur un contrôle de formulaire invalide avec nom=" n'est pas focalisable. enfin!

par exemple, utiliser ng-hide en même temps que nécessaire:

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

Je l'ai résolu par remplacer le nécessaire par ng-pattern à la place.

par exemple de solution:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
1
répondu Kajornjit Songsaen 2018-04-27 17:55:57
la source

alternativement une autre réponse infaillible est d'utiliser l'attribut HTML5 Placeholder alors il ne sera pas nécessaire d'utiliser des validations js.

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

Chrome ne sera pas en mesure de trouver des éléments vides, cachés et nécessaires pour se concentrer sur. La Solution La Plus Simple.

Espère que ça aide. Je suis totalement d'accord avec cette solution.

0
répondu utkarshk 2014-11-26 17:03:11
la source

je suis venu ici avec le même problème. Pour moi (injecter des éléments cachés si nécessaire - c.-à-d. l'éducation dans une application de travail) avait les drapeaux requis.

ce que j'ai réalisé, c'est que le validateur tirait sur l'injecté plus vite que le document n'était prêt, donc il s'est plaint.

mon étiquette originale ng-required utilisait l'étiquette de visibilité (vm.drapeau.hasHighSchool).

j'ai résolu en créant un indicateur à définir requis ng-requis="vm.drapeau.highSchoolRequired = = true"

j'ai ajouté un rappel 10ms sur le réglage de ce drapeau et le problème a été résolu.

 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>
0
répondu James Fleming 2015-03-08 21:49:25
la source

assurez-vous que tous les contrôles dans votre forme avec l'attribut requis ont également le jeu d'attribut de nom

0
répondu Adam Diament 2015-05-05 17:05:10
la source

cette erreur m'est arrivée parce que je soumettais un formulaire avec les champs requis qui n'étaient pas remplis.

l'erreur a été produite parce que le navigateur essayait de se concentrer sur les champs requis pour avertir l'utilisateur que les champs requis étaient nécessaires, mais que ces champs requis étaient cachés dans un écran aucune div de sorte que le navigateur ne pouvait pas se concentrer sur eux. Je soumettais à partir d'un onglet visible et les champs requis étaient dans un onglet caché, d'où l'erreur.

Pour corriger, assurez-vous de contrôler les champs obligatoires sont remplis.

0
répondu eloone 2015-08-14 16:29:13
la source

Its parce qu'il y a une entrée cachée avec l'attribut requis dans la forme.

dans mon cas, j'ai eu une boîte de sélection et il est caché par jQuery tokenizer en utilisant le style inline. Si Je ne sélectionne aucun token, le navigateur lance l'erreur ci-dessus sur la soumission du formulaire.

donc, je l'ai fixé en utilisant la technique css ci-dessous:

  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
répondu sudip 2016-08-11 00:54:07
la source

j'ai reçu la même erreur lors du clonage D'un élément HTML pour utilisation dans un formulaire.

(j'ai un formulaire partiellement complet, qui a un gabarit injecté, et puis le gabarit est modifié)

l'erreur faisait référence au champ original, et non à la version clonée.

Je n'ai pas pu trouver de méthodes qui forceraient la forme à se réévaluer (dans l'espoir qu'il se débarrasserait de toute référence aux anciens domaines qui maintenant n'existent pas) avant l'exécution de la validation.

pour contourner ce problème, j'ai retiré l'attribut requis de l'élément original et l'ai ajouté dynamiquement au champ cloné avant de l'injecter dans le formulaire. La forme valide maintenant correctement les champs clonés et modifiés.

0
répondu AlastairDewar 2016-09-30 13:46:48
la source

mon scénario, je l'espère, ne pas manquer dans cette longue graine de réponses était quelque chose de vraiment étrange.

j'ai des éléments div qui se mettent à jour dynamiquement à travers une boîte de dialogue appelée pour se charger et se faire actionner.

En bref, le div id avait

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

j'ai eu un utilisateur: poteaux et pour une raison quelconque l'encodage a fait quelque chose d'étrange dans le monde de script java. J'ai eu ce message d'erreur pour un formulaire travaillant dans d'autres lieu.

réduit à cela et un test de nouveau d'utiliser des nombres numériques à la place I. Eid semble résoudre le problème.

0
répondu Vahid 2017-05-17 20:01:52
la source

il y a des choses qui me surprennent encore... J'ai une forme avec un comportement dynamique pour deux entités différentes. Une entité a besoin de certains champs que l'autre n'a pas. Donc, mon code JS, selon l'entité, fait quelque chose comme: $ ('#periodo').removeAttr ("requis")); $("#periodo-container").hide();

et lorsque l'utilisateur sélectionne l'autre entité: $("#periodo-container").montrer(); $ ('#periodo').prop ("required", true);

mais parfois, quand le formulaire est soumis, le problème apparaît: "un contrôle de formulaire invalide avec nom=periodo" n'est pas focalisable (j'utilise la même valeur pour l'id et le nom).

pour corriger ce problème, vous devez vous assurer que l'entrée où vous définissez ou supprimez 'required' est toujours visible.

donc, ce que j'ai fait c'est:

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

ça a résolu mon problème... incroyable.

0
répondu Gustavo Soler 2017-12-24 20:26:39
la source

pour les autres AngularJS 1.x utilisateurs là-bas, cette erreur est apparue parce que je cachais un contrôle de forme de l'affichage au lieu de le retirer du DOM entièrement quand je n'avais pas besoin de la commande à remplir.

j'ai fixé ceci en utilisant ng-if au lieu de ng-show / ng-hide sur le div contenant le contrôle de forme nécessitant une validation.

espérons que vous aide compagnons de bord utilisateurs de cas.

0
répondu J.D. Mallen 2018-07-17 19:41:01
la source

dans mon cas..

ng-show était utilisé.

ng-if a été mis à sa place et a corrigé mon erreur.

0
répondu Chareesa Graham 2018-08-16 21:39:33
la source
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
-1
répondu Manmeet Khurana 2017-05-30 08:22:51
la source

Autres questions sur html html5 validation