«Contrôle de formulaire non valide» uniquement dans Google Chrome

Chrome souhaite se concentrer sur un contrôle requirejs mais toujours vide pour 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 l’envoi du formulaire, Chrome ne peut pas se concentrer sur le contrôle car il est masqué. Par conséquent, le formulaire ne sera pas envoyé.

Donc, pour contourner le problème, lorsqu’un contrôle est masqué par JavaScript, nous devons également supprimer l’atsortingbut “required” de ce contrôle.

Si vous ne vous souciez pas de la validation HTML5 (peut-être que vous validez dans JS ou sur le serveur), vous pouvez essayer d’append “novalidate” au formulaire ou aux éléments d’entrée.

Il affichera ce message si vous avez un code comme celui-ci:

solution à ce problème dépendra de la façon dont le site devrait fonctionner

Par exemple, si vous ne souhaitez pas que le formulaire soit envoyé à moins que ce champ ne soit requirejs, vous devez désactiver le bouton d’envoi.

donc le code js pour montrer le div devrait activer le bouton de soumission aussi bien

vous pouvez également masquer le bouton (doit être désactivé et masqué car s’il est masqué mais pas désactivé, l’utilisateur peut soumettre le formulaire de la même manière que si vous appuyez sur enter dans tout autre champ, mais si le bouton est désactivé, cela n’arrivera pas)

Si vous souhaitez que le formulaire se soumette si le div est masqué, vous devez désactiver toute entrée requirejse et activer les entrées pendant que vous affichez le div.

si quelqu’un a besoin des codes pour le faire, vous devez me dire exactement ce dont vous avez besoin

essayer d’utiliser les balises appropriées pour les contrôles HTML5 Like for Number (entiers)

pour les nombres décimaux ou les flottants

step = ‘Any’ Sans cela, vous ne pouvez pas soumettre votre formulaire en entrant une valeur décimale ou flottante telle que 3,5 ou 4,6 dans le champ ci-dessus.

Essayez de corriger le modèle, tapez pour les contrôles HTML5 pour résoudre ce problème.

J’avais cette erreur et j’ai déterminé que c’était en fait sur un champ qui n’était pas caché.

Dans ce cas, il s’agissait d’un champ type="number" , requirejs. Lorsqu’aucune valeur n’a jamais été entrée dans ce champ, le message d’erreur s’affiche dans la console et le formulaire n’est pas soumis. La saisie d’une valeur, puis sa suppression signifient que l’erreur de validation est affichée comme prévu.

Je crois que c’est un bogue dans Chrome: ma solution de contournement pour le moment était de proposer une valeur initiale / par défaut.

J’ai eu l’erreur:

Un contrôle de formulaire invalide avec name = ‘telefono’ n’est pas focalisable.

Cela se passait parce que je n’utilisais pas correctement le champ requirejs, qui activait et désactivait en cliquant sur un checkbok. La solution consistait à supprimer l’atsortingbut required chaque fois que le checkbok n’était pas marqué et à le marquer comme requirejs lorsque la case à cocher était cochée.

 var telefono = document.getElementById("telefono"); telefono.removeAtsortingbute("required"); 

J’ai eu ce problème quand j’ai eu class = “caché” sur les champs d’entrée parce que j’utilisais des boutons au lieu de puces radio – et en changeant l’état “actif” via JS ..

J’ai simplement ajouté un champ de saisie radio supplémentaire appartenant au même groupe où je voulais que le message apparaisse:

les 2 autres puces actives sont invisibles, celui-ci n’est pas et cela déclenche le message de validation et aucune erreur de console – un peu un hack mais qu’est-ce qui n’est pas ces jours-ci ..

Je dois faire quelque chose comme ça pour corriger le bogue, car j’ai un type="number" avec min="0.00000001" :

HTML:

JS:

 $('input[type="submit"]').click(function(e) { //prevent chrome bug $("input:hidden").val(null); }); 

Si je ne mets pas tous les champs d’entrée cachés sur null chrome essaiera toujours de valider l’entrée.

cette erreur obtient si append le format décimal. je viens d’append

 step="0.1" 

Aucune validation ne fera l’affaire.

 $("...").attr("required"); and $("...").removeAttr("required"); 

n’a pas fonctionné pour moi jusqu’à ce que je mette tout mon code jQuery entre cela:

 $(document).ready(function() { //jQuery code goes here }); 

remplacer required par required = “requirejs”