Javascript Girl
  1. Javascript Girl
  3. Messages d'alerte Javascript en boucle infinie
Intereting Posts
Node.innerHTML donnant les noms d'étiquettes en minuscules Détecter la fréquence audio du microphone avec node.js Comment détecter window.print () finir Activation de déclencheur sur l'étiquette de lien dans JS pour Android et iPhone Problèmes de chargement dynamique en JavaScript Twitter Typeahead.js, "un local, préfetch ou distant est requis" même si fourni Tri d'un ensemble d'objets dans Chrome Comment diviser les fichiers Node.js dans plusieurs fichiers Comment insérer le moment JS dans MySQL Retard à la fonction suivante en chaîne de méthode Comment appliquer 100% de hauteur à div? Concat et minifiez les fichiers JS dans Node Puis-je donner à la vue une animation dans emberjs OBTENIR le div entier avec ses éléments et l'envoyer avec la fonction php mail JQuery. N'ajoute pas à textarea après l'édition du texte

Messages d'alerte Javascript en boucle infinie

Les boîtes d'alerte en boucle infinie, ici, j'essaie de mettre un message d'alerte popup sur 2 champs consécutifs afin qu'ils ne puissent pas être laissés en blanc, je sais pourquoi cela se produit – car lorsque l'événement onblor de la 1ère fonction est lancé, il met l'accent sur le second et le second, Quand il retourne à la première ligne, le deuxième champ de texte est lancé.

Je sais que la validation serait meilleure lorsque cela se fait au niveau de la forme, mais c'est l'exigence que j'ai obtenue.

De l'aide?

Code Javascript 

function x() { if( document.getElementById("1").value.length==0) { alert('1 is required'); document.getElementById("1").focus(); } } function y() { if(document.getElementById("2").value.length==0) { alert('2 is required'); document.getElementById("2").focus(); } }

Code HTML 

 <input type="text" name="City Name" id="1" onblur="javascript:x();"> <input type="text" name="Kitty Name" id="2" onblur="javascript:y();">

Il y a un problème fondamental lors de la tentative de recentrage sur un champ sur un onblur lorsqu'il n'est pas valide. Si l'utilisateur décide de naviguer, il est tout simplement impossible. Lorsqu'ils cliquent sur le champ, ils sont repris de force. J'ai vu des cas où un utilisateur est obligé de tuer sa session de navigateur, juste pour échapper à une validation onblur trop onblur .

Je me rends compte que ce ne sera peut-être pas la solution exacte, mais je peux recommander une autre approche qui implique toujours une validation côté client.

Je vous recommande de mettre en surbrillance le champ comme étant invalide d'une manière ou d'une autre sur l' onblur . Par exemple, mettez une étoile à côté, mettez-la en rouge, etc. De cette façon, vous pouvez vous passer de l' alert et l'utilisateur a toujours le contrôle.

Lorsque l'utilisateur vient soumettre le formulaire, vous effectuez vos vérifications côté client et affichez-les à ce sujet (voir la réponse de @Phill Sacre)

Au lieu de le gérer dans l' onblur() , vous pouvez le gérer dans l'événement onchange() .

Si vous souhaitez toujours utiliser onblur() , utilisez la mise au point dans setTimeout comme indiqué ci-dessous. 

 alert('2 is required'); setTimeout(function() { document.getElementById("2").focus(); }, 100);

Ma suggestion: consolidez votre validation en une seule méthode et vérifiez chacune d'elles séquentiellement.

Donc (pseudo-code): 

 function validate() { for (field in fieldlist) { if (document.getElementById(field).value.length == 0) { displayerror(); document.getElementById(field).focus(); } } }

De cette façon, vous n'indiquez qu'une seule erreur à la fois.

Ma recommandation est de désactiver temporairement le gestionnaire de blur pendant l'exécution du gestionnaire d'autres entrées.

J'ai également remplacé votre HTML onblur par une solution Javascript correcte, supprimé les lignes vierges et ajouté l'indentation de code.

J'ai également changé les ID des éléments, qui ne sont pas autorisés à commencer par les nombres; Votre script n'aurait pas fonctionné sur les navigateurs compatibles. 

 <html> <body> <script type="text/javascript"> window.onload = function() { document.getElementById("input1").onblur = x; document.getElementById("input2").onblur = y; }; function x() { if (document.getElementById("input1").value.length == 0) { alert('1 is required'); // temporarily disable binding document.getElementById("input2").onblur = function() {}; document.getElementById("input1").focus(); // re-bind document.getElementById("input2").onblur = y; } } function y() { if (document.getElementById("input2").value.length == 0) { alert('2 is required'); // temporarily disable binding document.getElementById("input1").onblur = function() {}; document.getElementById("input2").focus(); // re-bind document.getElementById("input1").onblur = x; } } </script> <input type="text" name="City Name" id="input1" onblur="javascript:x();"> <input type="text" name="Kitty Name" id="input2" onblur="javascript:y();"> </body> </html>

Maintenant, ce script est plutôt détaillé et comporte beaucoup de duplication de code. Mais dans l'intérêt de rester sur le sujet, je laisserai d'autres améliorations pour un autre jour.

Je suggère également de ne pas le faire du tout; Comme James a dit, c'est irritant .

Mon être vous devez changer votre mode de comparaison de 

 document.getElementById("1").value.length==0

à 

 document.getElementById("1").value != ''

Il me semble que la longueur n'est toujours pas égale à zero

Essaye ça 

 <html> <head> <script> function x() { if (document.getElementById("input1").value.length == 0 ) { alert('1 is required'); document.getElementById("input1").focus(); } else if (document.getElementById("input2").value.length == 0 ) { alert('2 is required'); document.getElementById("input2").focus(); } } </script> </head> <body > cityname: <input type="text" name="City Name" id="input1" onblur="javascript:x();"> <br/> KittyName: <input type="text" name="Kitty Name" id="input2" onblur="javascript:x();"> </body> </html>

Voici ma solution: 

 function x() { if( document.getElementById("1").value.length==0) { alert('1 is required'); document.getElementById("1").focus(); return false; } return true } function y() { if(x() && document.getElementById("2").value.length==0) { alert('2 is required'); document.getElementById("2").focus(); } }

Donc, si 1 est requis, la fonction y ne sera pas évaluée

Si vous modifiez votre code comme celui-ci. Il peut être résolu. 

 <html> <head> <title>break alert infinite loop </title> <script> var e = function( _id ){ return document.getElementById(_id); }; window.onload = function(){ e("test").onblur = function(){ if( e("test").value != "11" ){ Msg("Number[11] is only allow"); e("test").focus(); } }; }; /* fix start */ var beforeMsg = ""; /* fix end */ function Msg( msg ){ /* fix start */ if( msg == beforeMsg ){ return; } beforeMsg = msg; /* fix end */ alert(msg); /* fix start */ setTimeout(function(){ beforeMsg = ""; },1000); /* fix end */ } </script> </head> <body> <p>only 11 is allow</p> <input type="text" id="test"/> </body> </html>

Autre code

Common.js 

 if( window.COMMON_JS == undefined ){ window.COMMON_JS = "common.js ver:1.0.0.1"; window.AletMessage = ""; MessageAlert = function( msg ){ if( window.AletMessage == msg ){ return; } window.AletMessage = msg; alert(msg); setTimeout(function(){ window.AletMessage = ""; },1000); }; }

Test.html 

 <html> <head> <script type="text/javascript" src="common.js"></script> <script> var e = function( _id ){ return document.getElementById(_id); }; window.onload = function(){ e("test").onblur = function(){ if( e("test").value != "11" ){ MessageAlert("Number[11] is only allow"); e("test").focus(); } }; }; </script> </head> <body> <p>Only 11 allowed.</p> <input type="text" id="test"/> </body> </html>

J'ai un JS et j'ai une fonction qui s'appelle onblur event of onblur et onblur que l'événement est en boucle Infinite.

Ensuite, j'ai déclaré une variable globale (Sur le dessus de JS et en dehors de la fonction Var Isvalid = true; )

En fonction, Exécuter le code de validation. 

 if (IsValid == true) { if validation is false. giving alert message. and updating the IsValid = false; }

Si la validation est vraie, la mise à jour de la variable globale. Isvalid = true;

En deuxième récurrence, il n'exécute pas la boucle. Si, dans la phase suivante, si l'événement flou s'est produit, la variable est automatiquement définie sur True .

Essayez ci-dessous le code Js. Cela résoudra votre problème. 

 function x() { if( document.getElementById("1").value.length==0) { if(alert('1 is required')){ document.getElementById("1").focus(); } else document.activeElement.blur(); } } function y() { if(document.getElementById("2").value.length==0) { if(alert('2 is required')){ document.getElementById("2").focus(); } else document.activeElement.blur(); } }