All geek questions in one place

Javascript warning messages in infinite loop

Warning fields in an infinite loop, here I am trying to put a pop-up warning message on two consecutive fields so that they cannot remain empty, I know why this happens - because when the event of the 1st function is fired, it focuses on the second and when it returns to the first, the second text field is launched.

I know that validation would be better if it were done at the form level, but that is the requirement I received.

Any help?

Javascript Code

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(); } }

HTML code

 <input type="text" name="City Name" id="1" onblur="javascript:x();"> <input type="text" name="Kitty Name" id="2" onblur="javascript:y();">
+6
source share
13 answers

Instead of being processed in the onblur() event, you can handle it in the onchange() event.

If you still want to use onblur() , use the focus inside setTimeout , as shown below.

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

There is a fundamental problem when trying to reorient a field to onblur if it is not valid. If the user decides to leave, simply cannot. When they leave the field, they are forcibly taken back. I have seen cases where a user is forced to kill his browser session, just to avoid overly diligent onblur .

I understand that this may not be the exact solution you need, but I can recommend a different approach, which still involves checking on the client side.

I recommend that you select the field as invalid in onblur . For instance. place a star next to you, highlight it in red, etc. This way you can do without alert , and the user still has control.

When a user arrives to submit a form, you perform your client-side checks and issue a warning on them (see @Phill Sacre answer)

+4
source

My suggestion: combine your validation in one method and consistently check in it.

So (pseudo code):

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

This way you will only show one error at a time.

+1
source

My recommendation is to temporarily disable the blur handler while another input handler is executing.

I also replaced your HTML onblur with the correct Javascript solution, removed blank lines and added indentation in the code.

I also changed the identifiers of elements that are not allowed to start with numbers; your script would not work on compatible browsers at all.

 <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>

Now this script is quite detailed and contains a lot of duplicate code. But in the interest of staying on topic, I will leave further improvements for another day.

I would also suggest not doing this at all; as James said, this is annoying.

0
source

Can you change your way of comparing with

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

to

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

it seems to me that the length is always not equal to zero

0
source

try it

 <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>
0
source

Here is my 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(); } }

So, if 1 is required, the function y will not be evaluated

0
source

If you change your code as follows. It can be solved.

 <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>
0
source

different 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>
0
source

I have one JS and there is one function called the onblur text field event and onblur that the event is in an infinite loop.

After that, I declared one global variable (At the top of JS and outside the Var Isvalid = true; function Var Isvalid = true; )

In function, execution of verification code.

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

If the check is correct, then updating the global variable. Isvalid = true;

In the second recursion, it will not execute a loop. If in the next phase, if a blur event occurs, the variable is automatically set to True .

0
source

Try the code below Js. This will solve your problem.

 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(); } }
0
source

I think this will work for you:

 for(;;) { alert("I am a looping alert box!"); }
0
source

Using timeouts, you can disable the onBlur event on the "target" element and return to the original element. This works in 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); }
0
source

Source: https://habr.com/ru/post/890594/

More articles:


All Articles