Un contrôle de formulaire non valide avec nom = '' n'est pas focalisable


671

J'ai un problème aigu 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, j'obtiens cette erreur:

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

C'est à partir de la console JavaScript.

J'ai lu que le problème pouvait être dû à des champs cachés ayant l'attribut requis. 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. Y a-t-il quelqu'un qui connaît une solution à cela?


11
Si vous pensez que cela peut être dû à des champs obligatoires masqués, vous devriez peut-être vérifier si, dans certains cas, ces champs restent vides? Par exemple, si vous remplissez user_id de la session, ou quelque chose de similaire, dans certains cas, il peut rester vide?
dkasipovic

1
D'accord. Ouvrez la console développeur (F12) dans Google Chrome et examinez les valeurs des champs pour voir si les valeurs de ces champs sont vides.
The Vanilla Thrilla

Merci pour votre commentaire. Mais cela ne me fait aucun sens? J'ai un simple formulaire asp.net, qui utilise des contrôles de formulaire asp.net. Les contrôles d'entrée sont générés par le framework.
mp1990

J'ai vérifié et il y a des valeurs dans les champs de saisie. J'ai un champ de saisie caché qui a également une valeur.
mp1990

3
Je pense que cela se produit lorsque le champ est requis mais n'est pas "visible" en termes généraux. Il m'arrive sous une forme divisée en plusieurs onglets que le champ qui a déclenché l'erreur se trouve dans un onglet qui n'est pas actif au moment de la soumission J'ai supprimé l'attribut requis du champ et ai fait une validation spécifique
TexWiller

Réponses:


818

Ce problème se produit sur Chrome si un champ de formulaire échoue à la validation, mais en raison du contrôle invalide respectif n'étant pas focalisable, la tentative du navigateur d'afficher le message "Veuillez remplir ce champ" à côté de lui échoue également.

Un contrôle de formulaire peut ne pas être focalisable au moment où la validation est déclenchée pour plusieurs raisons. Les deux scénarios décrits ci-dessous sont les causes les plus importantes:

  • Le champ n'est pas pertinent selon le contexte actuel de la logique métier. Dans un tel scénario, le contrôle respectif doit être supprimé du DOM ou il ne doit pas être marqué avec l' requiredattribut à ce stade.

  • Une validation prématurée peut se produire si un utilisateur appuie sur la touche ENTREE sur une entrée. Ou un utilisateur cliquant sur un bouton / contrôle d'entrée dans le formulaire qui n'a pas défini typecorrectement l' attribut du contrôle. Si l'attribut type d'un bouton n'est pas défini sur button, Chrome (ou tout autre navigateur d'ailleurs) effectue une validation à chaque fois que le bouton est cliqué, car il submits'agit de la valeur par défaut de l' typeattribut d'un bouton .

    Pour résoudre le problème, si vous avez un bouton sur votre page qui fait autre chose que soumettre ou remis à zéro , souvenez - vous toujours de le faire: <button type="button">.

Voir également https://stackoverflow.com/a/7264966/1356062


2
Ce problème peut survenir lorsqu'une page est créée et testée avec un navigateur qui ne prend pas en charge la validation côté client ou n'empêche pas la soumission du formulaire (voir Safari). Le prochain développeur ou utilisateur avec un navigateur qui empêche réellement la soumission de formulaire sur les erreurs côté client (voir Chrome; même sur les éléments de formulaire cachés) rencontre le problème d'un formulaire inaccessible car on ne peut pas soumettre le formulaire et ne recevoir aucun message de le navigateur ou le site. Empêcher complètement la validation via «novalidate» n'est pas une bonne réponse car la validation côté client doit prendre en charge les entrées utilisateur. Changer le site Web est la solution.
rôtir

4
Merci pour la réponse détaillée. Omettre requiredou ajouter novalidaten'est jamais une bonne solution de contournement.
fatCop

2
Ce devrait être la bonne réponse. Si vous utilisez la validation côté client html5, l'ajout de novalidate résout un problème lors de la création d'un autre. Dommage, Chrome veut valider une entrée qui n'est pas affichée (et ne devrait donc pas être requise).
kheit

1
Juste en laissant un exemple dans mon cas, il y avait un numberchamp caché où la valeur par défaut n'était pas divisible uniformément par la taille du pas. La modification de la taille de l'étape a résolu le problème.
James Scott

3
@IgweKalu bon appel. J'ai rencontré cette implémentation de TinyMCE sur un champ de zone de texte. TinyMCE masque le champ de formulaire d'origine (qui était "requis") et déclenche cette erreur. Solution, supprimez l'attribut "requis" désormais masqué du formulaire et utilisez une autre méthode pour vous assurer qu'il est rempli.
john

355

L'ajout d'un novalidateattribut au formulaire aidera:

<form name="myform" novalidate>

41
Ce n'est pas un risque pour la sécurité. (S'appuyer sur des vérifications côté client est.) C'est un problème de convivialité.
Jukka K. Korpela

9
J'ai essayé et trouvé que "novalidate" n'est pas requis! Je viens de donner un nom à ma forme et tout a bien fonctionné!
Sunny Sharma

33
J'ai essayé et trouvé que le "novalidat" est en effet requis. Seul l'ajout d'un nom de formulaire ne fonctionne pas.
Jeff Tian

13
L'ajout de novalidate arrête également la validation côté client, comme avec la gemme Rails Simple Form. Mieux vaut que les champs problématiques ne soient pas requis, selon la réponse d'Ankit + le commentaire de David Brunow.
acier

9
J'ai découvert qu'un "contrôle de formulaire non valide avec name = '' n'est pas focalisable." montre également si les entrées sont dans un<fieldset>
oscargilfc

261

Dans votre form, vous pourriez avoir caché inputavoir requiredattribut:

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

Le formne peut pas se concentrer sur ces éléments, vous devez retirer requiredde toutes les entrées cachées, ou mettre en œuvre une fonction de validation en javascript pour les manipuler si vous avez vraiment besoin d' une entrée cachée.


7
J'ai remarqué que cela peut également se produire avec des champs de type "e-mail" définis pour n'en afficher aucun, le problème provoqué par Chrome essayant de valider le format.
David Brunow

3
Cela n'a pas besoin d'avoir required. patternseul peut provoquer ce problème.
Pacerier

3
Dans mon cas, les champs du formulaire n'étaient pas de type = "caché", ils étaient simplement hors de vue, par exemple dans un formulaire avec des onglets.
Josh Mc

J'ai deux formulaires, un avec un <input type="hidden" required />et un autre avec un <input type="text" style="display: none" required />, et le seul qui affiche l'erreur dans Chrome est le display: none, tandis que "hidden"celui se soumet bien.
Pere

Ceci est la bonne réponse. Chrome tente de valider un champ qui a été masqué dans CSS. Le l'empêche d'afficher son message d'avertissement de validation, et il vous alerte de ce fait.
superluminaire

33

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 cherchait des champs vides dans le formulaire et essayait de se concentrer sur eux, mais parce qu'ils étaient définis display:none;, cela 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.
});

En outre, il s'agit peut-être d'un doublon de "Contrôle de formulaire non valide" uniquement dans Google Chrome


6
Si vous avez envie de voter contre cette réponse, veuillez laisser un commentaire pour me faire savoir pourquoi. Je préfère retirer la réponse si elle contient de mauvaises informations que de la laisser ici et d'induire la communauté en erreur.
Horatio Alderaan

1
Je ne voterai pas, mais je pense que ce code utilise une approche de «masquage du problème» par force brute. Il a certainement une utilité lorsqu'il s'agit de code hérité, mais pour les projets plus récents, je recommanderais d'examiner votre problème un peu plus dur. Cette réponse s'applique également à l'utilisation de "novalidate" sur la balise de formulaire, mais c'est un peu plus visible. +1 pour désactivé au lieu de supprimer requis.
Jonathan DeMarks

1
Pour donner un peu de contexte, j'étais exactement dans la situation de "gérer le code hérité" lorsque j'ai rencontré ce problème. Je suis entièrement d'accord pour dire que c'est un hack. Il est préférable de concevoir le balisage afin de ne pas rencontrer cette situation. Cependant, avec les bases de code héritées et les systèmes CMS rigides, ce n'est pas toujours possible. L'approche ci-dessus de désactiver plutôt que d'utiliser "novalidate" était la meilleure façon dont je pouvais penser pour résoudre le problème.
Horatio Alderaan

2
Je suis d'accord avec l'approche de désactivation des champs cachés. La suppression de leurs attributs «requis» perd les informations si elles sont affichées à nouveau plus tard. Les réactiver les garderait cependant.
Druckles

1
J'adore cette solution et je pense qu'elle fonctionne bien lorsque vous avez un formulaire avec des entrées qui sont affichées ou masquées de manière variable en fonction des valeurs sélectionnées d'autres entrées. Cela préserve les paramètres requis et permet toujours au formulaire de se soumettre. Encore mieux, si la validation échoue et que l'utilisateur fait quelque chose de complètement différent, aucune réinitialisation supplémentaire n'est nécessaire.
lewsid

17

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

visibility: hidden;

Ce message d'erreur indiquera également si le type d'entrée requis radioou checkboxpossède une display: none;propriété CSS.

Si vous souhaitez créer des entrées radio / case à cocher personnalisées où elles doivent être cachées de l'interface utilisateur et conserver toujours l' requiredattribut, vous devez utiliser à la place:

opacity: 0; Propriété CSS


même problème à l'exception que j'utilise la bibliothèque selectivity.js qui masque la boîte de sélection actuelle et montre une autre boîte js avec js et css. quand j'utilise requis dessus il jette cette erreur form-field.js: 8 create: 1 Un contrôle de formulaire invalide avec name = 'listing_id' n'est pas focalisable. cny sugestion comment puis-je travailler autour.
Inzmam ul Hassan

@InzmamGujjar si j'ai bien compris, votre plugin js crée une autre entrée de sélection avec ses propres classes. Peut-être en modifiant les classes CSS du plugin ou en sélectionnant l'entrée créée name=""au lieu de l'original?
Gus

13

Aucune des réponses précédentes n'a fonctionné pour moi, et je n'ai aucun champ caché avec l' requiredattribut.

Dans mon cas, le problème est dû au fait d'avoir un <form>puis un <fieldset>comme premier enfant, qui contient <input>l' requiredattribut with . La suppression du a <fieldset>résolu le problème. Ou vous pouvez envelopper votre formulaire avec; il est autorisé par HTML5.

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


Eu le même problème, merci pour l'indice. Géré pour le résoudre avec votre solution, c'est étrange.
Ben

Merci, c'était aussi le problème dans mon cas.
fantasticrice

dans mon cas, cet indice m'aide
Anja Ishmukhametova

2
Les Fieldsets étaient aussi mon problème. Dans mon cas, la réponse a été trouvée ici: stackoverflow.com/a/30785150/1002047 Semble être un bogue Chrome (car le HTML en question valide à l'aide du validateur du W3C). Changer simplement mes ensembles de champs en divs a résolu le problème.
Eric S. Bullington

@ EricS.Bullington merci d'avoir souligné. Je ne connaissais pas cette réponse; en tant qu'utilisateur, je l'ai trouvé moi-même en "découpant" des morceaux de mon formulaire. Soit dit en passant, je ne connais pas le système de numérotation des versions de Chrome, mais passer de 124 à 130 en 4 ans ne ressemble pas à une énorme étape ...
Pere

9

Encore une autre possibilité si vous obtenez l'erreur sur une entrée de case à cocher. Si vos cases à cocher utilisent du CSS personnalisé qui masque la valeur par défaut et la remplace par un autre style, cela déclenchera également l'erreur non focalisable dans Chrome en cas d'erreur de validation.

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

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

La solution simple consistait à le remplacer par ceci:

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

C'est aussi la solution que j'ai trouvée la plus efficace. Il permet au message d'erreur de s'afficher à proximité des contrôles de formulaire invisibles.
Rob

8

Il se peut que vous ayez masqué (affichage: aucun) les champs avec l' attribut requis .

Veuillez vérifier que tous les champs obligatoires sont visibles par l'utilisateur :)


7

Pour moi, cela se produit, quand il y a un <select>champ avec une option présélectionnée avec une 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 puis-je créer un espace réservé pour une zone de sélection? ).

Le problème se pose sur Chrome 43.0.2357.124.


7

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 venez de supprimer l'attribut requis lorsque vous essayez de masquer ce champ. Vous pouvez ajouter l'attribut requis au cas où 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.


Astuce: $("input").attr("required", "true"); ou au $("input").prop('required',true);contraire, vous pouvez removel' attribut / propriété . >> jQuery add requis aux champs de saisie
fWd82

7

Pour le problème Select2 Jquery

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

Solution Vous pouvez injecter un écouteur d'événements et un événement «non valide» de chaque élément d'un formulaire afin de pouvoir le 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);          
});

3

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>

je sais que c'est la même chose je fais juste un exemple, certaines personnes comprennent mieux les choses avec les codes: D
Robert

3

Oui. Si un contrôle de formulaire masqué contient un champ obligatoire, il affiche cette erreur. Une solution serait de désactiver ce contrôle de formulaire . Cela est dû au fait que si vous masquez un contrôle de formulaire, c'est généralement parce que vous ne vous souciez pas de sa valeur. Cette paire de valeurs de nom de contrôle de formulaire ne sera donc pas envoyée lors de la soumission du formulaire.


1
Merci pour cette idée! Il m'a été utile de basculer TOUS les éléments de formulaire parfois cachés, que les éléments individuels soient requis ou non, donc ma logique est agréable et simple :)
Gabe Kopley

3

Vous pouvez essayer .removeAttribute("required")ces éléments qui sont cachés au moment du chargement de la fenêtre. car il est très probable que l'élément en question soit marqué comme caché en raison 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 l'affaire.

Cela a fonctionné pour moi ... cheers


3

Une autre cause possible et non couverte dans toutes les réponses précédentes lorsque vous avez un formulaire normal avec des champs obligatoires et que vous soumettez le formulaire, puis le masquez directement après la soumission (avec javascript), ce qui ne laisse pas le temps à la fonctionnalité de validation de fonctionner.

La fonctionnalité de validation essaiera de se concentrer sur le champ requis et affichera le message de validation d'erreur mais le champ a déjà été masqué, donc "Un contrôle de formulaire non valide avec name = '' n'est pas focusable." apparaît!

Éditer:

Pour gérer ce cas, ajoutez simplement la condition suivante dans votre gestionnaire de soumission

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 masqués tant que le formulaire ne sera pas valide. Ainsi, si un champ n'est pas valide, le navigateur peut se concentrer dessus sans problème car ce champ est toujours affiché.


3

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é nécessite des champs que l'autre n'a pas. Donc, mon code JS, selon l'entité, fait quelque chose comme: $ ('# periodo'). RemoveAttr ('required'); $ ("# periodo-container"). hide ();

et lorsque l'utilisateur sélectionne l'autre entité: $ ("# periodo-container"). 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 nom = periodo '' n'est pas focalisable (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.

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

C'est résolu mon problème ... incroyable.



2

Pour une utilisation angulaire:

ng-required = "booléen"

Cela appliquera uniquement l'attribut html5 «requis» si la valeur est vraie.

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

2

Je suis venu ici pour répondre que j'avais déclenché ce problème moi-même sur la base de NE PAS fermer le </form> balise ET en ayant plusieurs formulaires sur la même page. Le premier formulaire s'étendra pour inclure la recherche de validation sur les entrées de formulaire provenant d'ailleurs. Parce que ces formulaires sont masqués, ils ont déclenché l'erreur.

donc 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 name = 'userId' n'est pas focalisable.

Un contrôle de formulaire non valide avec nom = 'mot de passe' n'est pas focalisable.

Un contrôle de formulaire non valide avec name = 'confirm' n'est pas focalisable.


2

Il existe de nombreuses façons de résoudre ce problème, comme

  1. Ajoutez novalidate à votre formulaire, mais c'est totalement faux car cela supprimera la validation du formulaire, ce qui entraînera des informations erronées saisies par les utilisateurs.

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

  1. L'utilisation peut supprimer l'attribut requis des champs obligatoires, ce qui est également erroné car il 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">

  1. L'utilisation peut désactiver les champs obligatoires 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 via le code javascript / jquery dépend de votre scénario.


2

J'ai trouvé le même problème lors de l'utilisation d'Angular JS. Cela était dû à l'utilisation de required avec ng-hide . Lorsque j'ai cliqué sur le bouton Soumettre alors que cet élément était masqué, il s'est produit l'erreur Un contrôle de formulaire non valide avec nom = '' n'est pas focalisable. enfin!

Par exemple, utiliser ng-hide avec requis:

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

Je l'ai résolu en remplaçant le requis par ng-pattern à la place.

Par exemple de solution:

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

1

Pour les autres utilisateurs d'AngularJS 1.x, cette erreur est apparue parce que je masquais un contrôle de formulaire à afficher 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-ifau lieu de ng-show/ ng-hidesur le div contenant le contrôle de formulaire nécessitant une validation.

J'espère que cela vous aidera les autres utilisateurs de cas Edge.


1

Permettez-moi de présenter mon cas car il était différent de toutes les solutions ci-dessus. J'avais une balise html qui n'était pas fermée correctement. l'élément n'était pas required , mais il était intégré dans un hiddendiv

le problème dans mon cas était avec le type="datetime-local", qui était - pour une raison quelconque - validé lors de la soumission du formulaire.

j'ai changé ça

<input type="datetime-local" />

dans ce

<input type="text" />

1

Je voulais répondre ici car AUCUNE de ces réponses, ou tout autre résultat Google n'a résolu le problème pour moi.

Pour moi, cela n'avait rien à voir avec des ensembles de champs ou des entrées cachées.

J'ai trouvé que si j'utilisais max="5"(par exemple) cela produirait cette erreur. Si j'ai utilisé maxlength="5" ... pas d'erreur.

J'ai pu reproduire l'erreur et effacer l'erreur plusieurs fois.

Je ne sais toujours pas pourquoi l'utilisation de ce code produit l'erreur, pour autant que cela indique qu'il devrait être valide, même sans "min" je crois.


Le mien a été résolu de la même manière, mais la configuration l'a été min='-9999999999.99' max='9999999999.99'.
Ricardo Green

0

Alternativement, une autre réponse infaillible consiste à utiliser l'attribut d'espace réservé HTML5, il ne sera donc pas nécessaire d'utiliser de validations js.

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

Chrome ne pourra trouver aucun élément vide, caché et requis sur lequel se concentrer. Solution simple.

J'espère que cela pourra aider. Je suis totalement trié avec cette solution.


0

Je suis venu ici avec le même problème. Pour moi (injecter des éléments cachés au besoin - c'est-à-dire l'éducation dans une application d'emploi) 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.

Ma balise ng-required d'origine utilisait la balise de visibilité (vm.flags.hasHighSchool).

J'ai résolu en créant un indicateur dédié pour définir la condition requise 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>

Votre solution est en fait très, très risquée. Quiconque avec un processeur lent obtiendra toujours la même erreur. C'est (ou sera) une condition de course typique. Les anciens smartphones pourraient probablement être affectés. Soyez donc prudent avec cette solution.
Drachenfels

0

Assurez-vous que tous les contrôles de votre formulaire avec l'attribut requis ont également l'attribut name défini


0

Cette erreur m'est arrivée car je soumettais un formulaire avec des champs obligatoires qui n'étaient pas remplis.

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

Pour résoudre ce problème, assurez-vous de contrôler que les champs obligatoires sont remplis.


0

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 boîte de sélection et elle est cachée par le tokenizer jquery utilisant le style en ligne. 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;

 }

0

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, qui contient un modèle, puis le modèle est modifié)

L'erreur faisait référence au champ d'origine et non à la version clonée.

Je n'ai trouvé aucune méthode qui forcerait le formulaire à se réévaluer (dans l'espoir qu'il se débarrasse de toute référence aux anciens champs qui n'existent plus) avant d'exécuter la validation.

Afin de contourner ce problème, j'ai supprimé l'attribut requis de l'élément d'origine et l'ai ajouté dynamiquement au champ cloné avant de l'injecter dans le formulaire. Le formulaire valide désormais correctement les champs clonés et modifiés.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.