Un contrôle de formulaire non valide avec le nom = '' n'est pas focusable
J'ai un problème grave sur mon site Web . Dans Google Chrome, certains clients ne peuvent pas accéder à ma page de paiement . Lorsque j'essaie de soumettre un formulaire, le message d'erreur suivant s'affiche:
An invalid form control with name='' is not focusable.
Cela provient de la console JavaScript.
J'ai lu que le problème pouvait être dû au fait que des champs cachés avaient l'attribut requis… .. Maintenant, le problème est que nous utilisons des validateurs de champs requis pour les formulaires Web .net, et non l'attribut requis de html5.
Il semble aléatoire de savoir qui obtient cette erreur ... Est-ce que quelqu'un connaît une solution à ce problème?
Il ne suffit pas de dire
Ajouter un attribut novalidate au formulaire aidera
Cela n'explique pas le problème, et le PO n'a peut-être pas compris pourquoi cela aiderait ou si c'est vraiment utile.
La réponse de Here _ qui explique vraiment le cas, comprendre le problème devrait vous permettre de trouver une solution adaptée à votre développement:
Chrome souhaite se concentrer sur un contrôle requis, mais toujours vide, afin de pouvoir afficher le message "Veuillez remplir ce champ". Toutefois, si le contrôle est masqué au moment où Chrome souhaite afficher le message, c'est-à-dire au moment de la soumission du formulaire, Chrome ne peut pas se concentrer sur le contrôle car il est masqué. Par conséquent, le formulaire n'est pas envoyé.
Donc, pour contourner le problème, lorsqu'un contrôle est masqué par javascript, nous devons également supprimer l'attribut "requis" de ce contrôle.
Pour bien utiliser l'avertissement, considérez ceci - ne masquez pas un champ lorsqu'il échoue la validation. Mais ce n’est pas une règle stricte, ni une règle du tout. Comme je l'ai mentionné dans mon commentaire ci-dessous, je paraphrase
Dans certains cas, le problème ne pose aucun problème et ne provoque pas de perte de fonctionnalité dans une application. Ensuite, l'erreur peut être ignorée.
MISE À JOUR: 21 août 2015
L'erreur en question peut également être due à une validation prématurée. Une validation prématurée peut se produire lorsque vous avez une entrée <button> sans attribut set type. Si l'attribut type d'un bouton n'est pas défini sur bouton, Chrome (ou tout autre navigateur, pour cette question) effectue une validation à chaque clic sur le bouton, car submit est le type de boutons par défaut. Pour résoudre le problème, si votre page contient un bouton qui fait autre chose que soumettre ou réinitialiser, n'oubliez jamais de le faire: <button type="button">
Ajouter un attribut novalidate au formulaire aidera:
<form name="myform" novalidate>
Dans votre form, vous avez peut-être masqué input avec l'attribut required:
<input type="hidden" required /><input type="file" required style="display: none;"/>
form ne peut pas se concentrer sur ces éléments, vous devez supprimer required de toutes les entrées masquées ou implémenter une fonction de validation en javascript pour les gérer si vous avez réellement besoin d'une entrée masquée.
Au cas où quelqu'un d'autre aurait ce problème, j'ai vécu la même chose. Comme indiqué dans les commentaires, cela était dû au fait que le navigateur avait tenté de valider les champs cachés. Il s'agissait de trouver des champs vides dans le formulaire et d'essayer de se concentrer sur eux, mais comme ils étaient définis sur display:none;, cela ne pouvait pas. D'où l'erreur.
J'ai été capable de le résoudre en utilisant quelque chose semblable à 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.
});
En outre, il s’agit peut-être d’un doublon de "Contrôle de formulaire non valide" uniquement dans Google Chrome
Dans mon cas, le problème était que input type="radio" required était caché avec:
visibility: hidden;
Ce message d'erreur indique également si le type d'entrée requis radio ou checkbox a une propriété CSS display: none;.
Si vous voulez créez des entrées de radio/case à cocher personnalisées où elles doivent être masquées de l'interface utilisateur tout en conservant l'attribut required, vous devriez plutôt utiliser les éléments suivants:
opacity: 0; propriété CSS
Aucune des réponses précédentes n'a fonctionné pour moi et je n'ai aucun champ caché avec l'attribut required.
Dans mon cas, le problème était dû au fait que <form>, puis <fieldset> était son premier enfant, qui contient le <input> avec l'attribut required. Supprimer le <fieldset> a résolu le problème. Ou vous pouvez envelopper votre formulaire avec elle; c'est permis par HTML5.
Je suis sur Windows 7 x64, version de Chrome 43.0.2357.130 m.
Pour moi, cela se produit lorsqu'il existe un champ <select> avec une option présélectionnée avec la valeur '':
<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 multi-navigateur pour un espace réservé ( Comment créer un espace réservé pour une zone de sélection? ).
Le problème se pose sur Chrome 43.0.2357.124.
Il se peut que vous ayez caché (affichage: aucun) des champs avec l'attribut required .
Veuillez vérifier que tous les champs obligatoires sont visibles pour l'utilisateur :)
Si vous avez un champ avec un attribut requis qui n'est pas visible lors de la soumission du formulaire, cette erreur sera renvoyée. Vous supprimez simplement l'attribut requis lorsque vous essayez de masquer ce champ. Vous pouvez ajouter l'attribut requis au cas où vous souhaiteriez afficher à nouveau le champ. De cette manière, votre validation ne sera pas compromise et en même temps, l'erreur ne sera pas renvoyée.
Pour le problème Select2 Jquery
Le problème est dû à la validation HTML5 qui ne permet pas de focaliser un élément invalide caché. Je suis tombé sur ce problème lorsque je travaillais avec le plugin jQuery Select2.
Solution Vous pouvez injecter un écouteur d’événement sur et un événement "non valide" de chaque élément d’un formulaire afin de pouvoir 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);
});
Encore une autre possibilité si vous obtenez l'erreur sur une entrée case à cocher. Si vos cases à cocher utilisent des CSS personnalisées qui masquent les valeurs par défaut et les remplacent par un autre style, cela déclenchera également l'erreur non activable dans Chrome en cas d'erreur de validation.
J'ai trouvé ceci dans ma feuille de style:
input[type="checkbox"] {
visibility: hidden;
}
La solution simple consistait à le remplacer par ceci:
input[type="checkbox"] {
opacity: 0;
}
Une autre cause possible et non couverte dans toutes les réponses précédentes lorsque vous avez un formulaire normal avec les champs obligatoires et que vous le soumettez puis le masquez directement après le dépôt (avec javascript), ce qui ne laisse aucun temps à la fonctionnalité de validation.
La fonctionnalité de validation essaiera de se concentrer sur le champ requis et d'afficher le message de validation d'erreur, mais le champ a déjà été masqué. "Un contrôle de formulaire non valide portant le nom = '' ne peut donc pas être mis au point." apparaît!
Modifier:
Pour gérer ce cas, ajoutez simplement la condition suivante dans votre gestionnaire d'envoi.
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
En supposant que vous masquez le formulaire lors de sa soumission, ce code garantit que le formulaire/les champs ne seront pas masqués tant que le formulaire ne sera pas valide. Ainsi, si un champ n'est pas valide, le navigateur peut se concentrer sans problème car ce champ est toujours affiché.
Oui .. Si un contrôle de formulaire masqué a un champ obligatoire, il indique alors cette erreur. Une solution serait de désactiver ce contrôle de formulaire . En effet, si vous masquez un contrôle de formulaire, c'est généralement parce que sa valeur ne vous concerne pas. Donc, cette paire de valeurs de nom de contrôle de formulaire ne sera pas envoyée lors de la soumission du formulaire.
Il y a encore des choses qui me surprennent ... J'ai un formulaire à comportement dynamique pour deux entités différentes. Une entité nécessite des champs que l’autre ne .. ... Ainsi, mon code JS, en fonction de l’entité, fait quelque chose comme:. . $ ("# periodo-container"). hide ();
et lorsque l'utilisateur sélectionne l'autre entité: $ ("# periodo-conteneur"). show (); $ ('# periodo'). prop ('required', true);
Mais parfois, lorsque le formulaire est soumis, le problème apparaît: "Un contrôle de formulaire non valide avec name = periodo" n'est pas centrable (j'utilise la même valeur pour l'identifiant et le nom).
Pour résoudre ce problème, vous devez vous assurer que l'entrée où vous définissez ou supprimez «requis» est toujours visible.
Alors, ce que j'ai fait c'est:
$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required');
$("#periodo-container").hide(); //then hide
C’est résolu mon problème… incroyable.
Pour utilisation angulaire:
ng-required = "boolean"
Cela n’appliquera l’attribut "obligatoire" html5 que si la valeur est true.
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
Il affichera ce message si vous avez un code comme celui-ci:
<form>
<div style="display: none;">
<input name="test" type="text" required/>
</div>
<input type="submit"/>
</form>
Vous pouvez essayer .removeAttribute("required") pour les éléments masqués au moment du chargement de la fenêtre. comme il est fort probable que l'élément en question soit marqué comme étant caché à cause de javascript (formulaires à onglets)
par exemple.
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
document.getElementById('hidden_field').removeAttribute("required");
}
Cela devrait faire la tâche.
Cela a fonctionné pour moi ... à la vôtre
Dans mon cas..
ng-show était utilisé.ng-if a été mis à sa place et a corrigé mon erreur.
Il y a plusieurs façons de résoudre ce problème, comme
- Ajoutez novalidate à votre formulaire, mais c’est totalement faux, car cela supprime la validation du formulaire, ce qui entraînera des informations erronées saisies par les utilisateurs.
<form action="...." class="payment-details" method="post" novalidate>
Use peut supprimer l'attribut requis des champs obligatoires, ce qui est également faux car cela supprimera à nouveau la validation du formulaire.
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">
Use peut désactiver les champs obligatoires lorsque vous n'allez pas soumettre le formulaire au lieu de faire une autre option. Ceci 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 via le code javascript/jquery dépend de votre scénario.
J'ai trouvé le même problème en utilisant Angular JS. Cela était dû à l’utilisation de required avec ng-hide . Lorsque j'ai cliqué sur le bouton d'envoi alors que cet élément était masqué, l'erreur Un contrôle de formulaire non valide portant le nom = '' ne peut pas être mis au point. enfin!
Par exemple, en utilisant ng-hide avec required:
<input type="text" ng-hide="for some condition" required something >
Je l'ai résolu en remplaçant le paramètre requis par ng-pattern.
Par exemple de solution:
<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
Je suis venu ici pour répondre que j'avais moi-même provoqué ce problème en ne fermant PAS la balise </form> ET en ayant plusieurs formulaires sur la même page. Le premier formulaire s'étendra à la recherche de validation sur des entrées de formulaire provenant d’autres sources. Parce que CES formulaires sont masqué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 formulaire non valide avec le nom = 'userId' ne peut pas être mis au point.
Un contrôle de formulaire non valide avec le nom = 'mot de passe' ne peut pas être mis au point.
Un contrôle de formulaire non valide avec le nom = 'confirmer' ne peut pas être mis au point.
Une autre solution, à la fois infaillible et irréprochable, consiste à utiliser l'attribut HTML5 Placeholder, sans qu'il soit nécessaire d'utiliser une validation Js.
<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">
Chrome ne pourra trouver aucun élément vide, caché ou requis sur lequel se concentrer. Solution simple.
J'espère que cela pourra aider. Je suis totalement trié avec cette solution.
Cette erreur m'est arrivée parce que je soumettais un formulaire avec des champs obligatoires non remplis.
L'erreur a été provoquée par le fait que le navigateur essayait de se concentrer sur les champs obligatoires pour avertir l'utilisateur que ceux-ci étaient obligatoires, mais que ces champs obligatoires étaient masqués dans un affichage sans div, de sorte que le navigateur ne pouvait pas se concentrer sur eux. Je soumettais à partir d'un onglet visible et les champs obligatoires étaient dans un onglet masqué, d'où l'erreur.
Pour résoudre ce problème, assurez-vous de contrôler les champs obligatoires.
Je voulais répondre ici, car AUCUNE de ces réponses, ou tout autre résultat de Google, a résolu le problème pour moi.
Pour moi, cela n'avait rien à voir avec les champs ou les entrées cachées.
J'ai constaté que si j'utilisais max="5" (par exemple), cela produirait cette erreur. Si j'ai utilisé maxlength="5" ... pas d'erreur.
J'ai été capable de reproduire l'erreur et de la supprimer plusieurs fois.
Je ne sais toujours pas pourquoi l’utilisation de ce code produit l’erreur, dans la mesure où this indique qu’il devrait être valide, même sans «min», je crois.
Pas uniquement lorsque vous spécifiez required, j'ai également eu ce problème lors de l'utilisation de min et max p. Ex.
<input type="number" min="1900" max="2090" />
Ce champ peut être masqué et affiché en fonction d'une autre valeur radio. Donc, pour une solution temporaire, j'ai supprimé la validation.
J'ai également eu le même problème.Cette astuce a fonctionné pour moi… .. Il suffit de supprimer l'attribut requis du champ caché.
<input type="password" name="password" id="password"
class="form-control" placeholder="" required>
à
<input type="password" name="password" id="password"
class="form-control" placeholder="" >
C'est parce qu'il y a une entrée cachée avec l'attribut requis dans le formulaire.
Dans mon cas, j'avais une zone de sélection et elle est masquée par tokenizer JQuery à l'aide du style inline. Si je ne sélectionne aucun jeton, le navigateur renvoie l'erreur ci-dessus lors de la soumission du formulaire.
Donc, je l'ai corrigé 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;
}
Assurez-vous que tous les contrôles de votre formulaire avec l'attribut requis possèdent également l'attribut name
Pour les autres utilisateurs d'AngularJS 1.x, cette erreur est apparue car je dissimulais l'affichage d'un contrôle de formulaire au lieu de le supprimer complètement du DOM, alors que je n'avais pas besoin que le contrôle soit terminé.
J'ai corrigé cela en utilisant ng-if au lieu de ng-show / ng-hide sur le div contenant le contrôle de formulaire nécessitant une validation.
J'espère que cela vous aidera, vous aussi, les utilisateurs de votre cas Edge.
J'ai reçu la même erreur lors du clonage d'un élément HTML à utiliser dans un formulaire.
(J'ai un formulaire partiellement complet, dans lequel un modèle est injecté, puis le modèle est modifié)
L'erreur faisait référence au champ d'origine et non à la version clonée.
Je ne pouvais trouver aucune méthode qui obligerait le formulaire à se réévaluer (dans l'espoir qu'il se débarrasserait de toute référence aux anciens champs qui n'existent plus) avant d'exécuter la validation.
Afin de résoudre ce problème, j'ai supprimé l'attribut requis de l'élément d'origine et l'a ajouté dynamiquement au champ cloné avant de l'injecter dans le formulaire. Le formulaire valide maintenant correctement les champs clonés et modifiés.
Je suis venu ici avec le même problème. Pour moi (injecter des éléments cachés au besoin - c'est-à-dire des études dans une application), j'avais les drapeaux requis.
Ce que j'ai compris, c'est que le validateur a tiré sur l'injecté plus rapidement que le document n'était prêt, ainsi il s'est plaint.
Ma balise d'origine ng-required utilisait la balise de visibilité (vm.flags.hasHighSchool).
J'ai résolu en créant un indicateur dédié pour définir requis Ng-required = "vm.flags.highSchoolRequired == true"
J'ai ajouté un rappel de 10 ms sur la définition de cet indicateur 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>
J'ai souvent vu cette question et ai moi-même rencontré cette "erreur". Il y a même eu des liens pour se demander s'il s'agissait d'un bogue réel dans Chrome.
C'est la réponse qui se produit lorsqu'un ou plusieurs éléments de type entrée de formulaire sont masqués et que ces éléments se voient imposer une limite minimale/maximale (ou une autre limitation de validation).
Lors de la création d'un formulaire, aucune valeur n'est attribuée aux éléments. Les valeurs des éléments peuvent ensuite être renseignées ou rester inchangées. Au moment de la soumission, le formulaire est analysé et tous les éléments cachés situés en dehors de ces limites de validation génèrent cette "erreur" dans la console et la soumission échoue. Comme vous ne pouvez pas accéder à ces éléments (car ils sont cachés), c'est la seule réponse valide.
Ce n'est pas une faute ni un bug. C'est une indication qu'il y a des valeurs d'élément sur le point d'être soumises qui sont en dehors des limites stipulées par un ou plusieurs éléments.
Pour résoudre ce problème, attribuez une valeur par défaut valide aux éléments masqués dans le formulaire à tout moment avant la soumission du formulaire. Ces «erreurs» ne se produiront jamais. Ce n’est pas un bug en tant que tel, il vous oblige simplement à adopter de meilleures habitudes de programmation.
NB: Si vous souhaitez définir ces valeurs en dehors des limites de validation, utilisez form.addEventListener ('submit', myFunction) pour intercepter l'événement 'submit' et complétez ces éléments dans «myFunction». Il semble que la vérification de validation est effectuée avant que "myFunction () soit appelée.
J'espère que mon scénario, que je n'ai pas manqué dans cette longue série de réponses, était vraiment étrange.
J'ai des éléments div qui se mettent à jour de manière dynamique via un dialogBox appelé dans ceux-ci pour être chargés et activés.
En bref, les identifiants div avaient
<div id="name${instance.username}"/>
J'avais un utilisateur: 帐户 et pour une raison quelconque, l'encodage faisait des choses étranges dans le monde des scripts Java. J'ai reçu ce message d'erreur pour un formulaire fonctionnant ailleurs.
Limité à cela et à un nouveau test utilisant des nombres numériques à la place, un id apparaît pour résoudre le problème.
Permettez-moi de présenter mon cas car il était différent de toutes les solutions ci-dessus. J'ai eu une balise HTML qui n'a pas été fermée correctement. l'élément était pas required, mais il était intégré à un hidden div
le problème dans mon cas était avec le type="datetime-local", qui était, pour une raison quelconque, en cours de validation lors de la soumission du formulaire.
j'ai changé cela
<input type="datetime-local" />
dans ce
<input type="text" />