Boîtes d'alerte dans une boucle infinie, j'essaie ici de mettre un message d'alerte contexu 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 OnBlur de la 1ère fonction est lancé, il est mis à jour. Deuxième et quand il se retourne au premier onblur de 2nd Textfield est lancé.
Je sais que la validation serait préférable lors de la fin du formulaire, mais c'est l'exigence que j'ai eue. p>
Toute aide? P>
code JavaScript P>
<input type="text" name="City Name" id="1" onblur="javascript:x();"> <input type="text" name="Kitty Name" id="2" onblur="javascript:y();">
12 Réponses :
Ma suggestion: consolider votre validation dans une méthode et vérifier chacune de manière séquentielle.
donc (pseudo-code): de cette façon que vous allez jamais afficher une erreur à la fois.
+1 pour la validation consolidée. (Seulement 67 à partir, maintenant Phil! ;-))
Si Valider est invoqué Onblur, cela n'a-t-il pas les mêmes problèmes?
@Rohit: Je ne vois pas que vous avez changé quelque chose de substance. Ai-je tort?
@Tomalak Il devrait éviter le problème de la boucle infinie, car une seule zone de texte doit être marquée non valide (et concentrée) à la fois. @Rohit je ne peux pas voir non plus de changement substantiel ?!
@Phill: je suis en désaccord. Lorsque vous laissez une zone de texte, si une zone de texte [Autre] est vide, vous obtenez une erreur et que la zone de texte est focalisée. Donc, le gestionnaire de flou incendie à nouveau ...
@Tomalak en pensant à ce sujet, qui met également en évidence un problème de validation de flou comme celui-ci - les champs qui n'ont pas encore été terminés seront marqués comme invalides. Pour être honnête, il serait préférable d'utiliser une bibliothèque de validation telle que la validation de JQuery plutôt que quelque chose comme ça!
@tomalak, un code d'exécution serait génial, car j'ai essayé votre pseudo code et cela ne fonctionne pas pour moi au moins dans IE
@Rohit: Je n'ai fourni aucun pseudo-code. J'ai fourni du code en direct, qui fonctionne pour moi dans jsfiddle.net
@Phill: Je suis d'accord. Toute cette entreprise est un peu ridicule.
Il existe un problème fondamental lorsque vous essayez de recentrer sur un champ sur un Je me rends compte que cela pourrait ne pas être la solution exacte que vous suivez, mais puis-je recommander une autre approche qui implique toujours une validation côté client.
Je vous recommande de mettre en évidence le champ comme étant invalide d'une manière ou d'une autre sur le Lorsque l'utilisateur vient soumettre le formulaire, vous exécutez vos chèques côté client et affichez une alerte d'affichage, alors (voir la réponse de @phill Sacre) surblur quand il est invalide. Si l'utilisateur décide de naviguer loin, le tout simplement ne peut pas. Quand ils cliquent loin du champ, ils sont repris de force. J'ai vu des cas où un utilisateur est obligé de tuer leur session de navigateur, juste pour échapper à une validation surblur .
Onblur . Par exemple. Mettez une étoile à côté, mettez-la en surbrillance en rouge, etc. De cette façon, vous pouvez vous dispenser avec l'alerte et l'utilisateur a toujours le contrôle.
Je suis également d'accord avec cela - la validation de Onblur est souvent gênante. Essayez de suggérer une alternative si vous pouvez - mettre en évidence les champs non valides est souvent utilisé.
Ma recommandation est de désactiver temporairement le gestionnaire J'ai également remplacé votre code HTML J'ai également modifié les identifiants d'élément, qui ne sont pas autorisés à commencer par des chiffres; Votre script n'aurait pas travaillé du tout sur des navigateurs conformes. P> flou code> lors de l'exécution du gestionnaire d'une autre entrée. Onblur code> avec un javascript approprié Solution, supprimé les lignes vides et ajouter une indentation du code ajouté. p> <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>
Hey Tomalak, ce code est toujours en boucle infinie au moins pour IE.
@Rohit: a travaillé pour moi sur jsfiddle.net.
Mon être vous devez changer votre mode de comparaison de à Il me semble que cette longueur n'est toujours pas égal zéro
Essayez ceci
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();
}
}
J'ai fait un test et cela fonctionne bien dans IE et FF, mais étrangement en chrome. En chrome, la zone de texte se concentre, mais le curseur n'apparaît pas
Vous avez raison, cela fonctionne si vous cliquez sur l'entrée, mais que vous n'appuyez pas si vous appuyez sur la touche
au lieu de la manipuler dans Si vous souhaitez toujours utiliser Onblur () événement, vous pouvez le gérer dans Onchange () événement. OnBlur () , puis utilisez la mise au point dans Settimeout comme indiqué ci-dessous.
Je suis confus pourquoi le délai d'attente est nécessaire. Lorsque vous mettez un focus () sans le colyout, il semble que le champ ne soit plus flou à la déclenchement de l'Onblur (). Quelqu'un peut-il m'expliquer pourquoi l'OnBlur () incendie à nouveau?
Si vous modifiez votre code comme celui-ci.
Il peut être résolu.
Autre code
commun.js test.html
J'ai un JS et j'ai une fonction appelée Après cela, j'ai déclaré une variable globale (sur le dessus de JS et en dehors de la fonction en fonction, effectuant le code de validation. P> onblur code> événement de texte et Onblur code> Cet événement est en boucle infinie. var isvalid = true; code>) p> if (IsValid == true)
{
if validation is false.
giving alert message.
and updating the IsValid = false;
}
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();
}
}
Avec l'utilisation des délais d'attente, vous pouvez désactiver l'événement Onblur sur l'élément "cible" et revenir à l'élément source. Cela fonctionne dans IE.
function focusWithoutEvents(object) {
// Small timeout so that the active element will be the "next" element
setTimeout(function() {
var activeElement = document.activeElement;
// Save the current onblur()
var activeOnblur = activeElement.onblur;
// Disable the onblur event
activeElement.onblur = null;
// Now we can focus without triggering onblur event
object.focus();
// With a small delay, put back the onblur code.
setTimeout(function() {
activeElement.onblur = activeOnblur
}, 100);
}, 100);
}
Pourquoi avez-vous
onblur = "JavaScript: x ();" et pas seulementonblur = "x ();" ?Pourquoi avez-vous une ligne vide toutes les autres lignes et aucune indentation?