Question Un contrôle de formulaire non valide avec name = '' ne peut pas être mis au point


J'ai un problème aigu sur mon site. Dans Google Chrome, certains clients ne peuvent pas accéder à ma page de paiement. Lorsque j'essaie de soumettre un formulaire, j'obtiens cette erreur:

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û à des champs cachés possédant l'attribut requis. Maintenant, le problème est que nous utilisons .net webforms requis valideurs de champ, et pas l'attribut requis html5.

Il semble aléatoire qui reçoit cette erreur. Y a-t-il quelqu'un qui connaisse une solution pour cela?


472
2018-03-03 13:29


origine


Réponses:


Il ne suffit pas de dire

L'ajout d'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 s'il est vraiment utile.

IciC'est une réponse qui explique vraiment le cas, comprendre le problème devrait vous permettre d'arriver à 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é.

Ainsi, pour contourner le problème, lorsqu'un contrôle est masqué par javascript, nous devons également supprimer l'attribut 'required' de ce contrôle.

Pour mettre l'avertissement en bon usage, considérez ceci - ne cache pas un champ quand la validation échoue. Mais ce n'est pas une règle stricte et ce n'est pas 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 survenir en raison d'une validation prématurée. Une validation prématurée peut se produire lorsque vous avez un <button> entrée sans ensemble type attribut. Sans l'attribut de type d'un bouton étant défini sur le bouton, Chrome (ou tout autre navigateur d'ailleurs) effectue une validation chaque fois que le bouton est cliqué parce que soumettre est le type de boutons par défaut. Pour résoudre le problème, si vous avez un bouton sur votre page qui fait autre chose que soumettre ou réinitialiser, rappelez-vous toujours de le faire: <button type="button">


549
2018-02-05 09:38



Ajouter un novalidate Attribuer au formulaire aidera:

<form name="myform" novalidate>

314
2018-03-03 13:48



Dans votre formulaire, vous pourriez avoir des entrées cachées ayant des attributs requis.

<input type="hidden" required />

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


198
2018-04-22 09:16



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 tentait de valider les champs masqués. Il s'agissait de trouver des champs vides dans le formulaire et d'essayer de se concentrer sur eux, mais parce qu'ils étaient définis sur display:none;, ça ne pouvait pas. D'où l'erreur.

J'ai été capable de 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 formulaire invalide" uniquement dans Google Chrome


23
2018-03-31 04:14



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

Dans mon cas, le problème a été causé par le fait d'avoir un <form> puis un <fieldset> comme son premier enfant, qui détient le <input> avec le required attribut. Enlever le <fieldset> résolu le problème. Ou vous pouvez envelopper votre formulaire avec elle; c'est autorisé par HTML5.

Je suis sur Windows 7 x64, version Chrome 43.0.2357.130 m.


12
2017-07-02 22:42



Dans mon cas, le problème était avec input type="radio" required être caché avec:

visibility: hidden;

Ce message d'erreur indiquera également si le type d'entrée requis radio ou checkbox a un display: none; Propriété CSS

Si tu veux créer des entrées radio / checkbox personnalisées où elles doivent être cachées de l'interface utilisateur et garde toujours le required attribut, vous devriez plutôt utiliser le:

opacity: 0; Propriété CSS


12
2018-04-25 19:45



Pour moi, cela arrive, quand il y a un <select> champ avec l'option présélectionnée avec la 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 multi-navigateur pour un espace réservé (Comment créer un espace réservé pour une boîte 'select'?).

Le problème se pose sur Chrome 43.0.2357.124.


7
2018-06-16 12:26



Si vous avez un champ avec l'attribut requis qui n'est pas visible lors de la soumission du formulaire, cette erreur sera levée. Vous supprimez simplement l'attribut requis lorsque vous tentez de masquer ce champ. Vous pouvez ajouter l'attribut requis si vous souhaitez afficher à nouveau le champ. De cette façon, votre validation ne sera pas compromise et en même temps, l'erreur ne sera pas levée.


7
2017-08-27 17:23



Il se peut que vous ayez des champs cachés (affichage: aucun) avec le Champs obligatoires attribut.

Veuillez cocher tous les champs obligatoires pour l'utilisateur :)


6
2018-04-07 14:47



Encore une autre possibilité si vous obtenez l'erreur sur une entrée de case à cocher. Si vos cases à cocher utilisent des feuilles de style CSS personnalisées qui masquent les valeurs par défaut et les remplacent par d'autres styles, cela déclenchera également l'erreur non focalisable dans Chrome sur l'erreur de validation.

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

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

Une solution simple était de le remplacer par ceci:

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

5
2017-12-15 15:52