Validate number javascript doesn't work in Chrome
Question
I used the script below in order to validate the numbers it works in IE but it doesn't work in the newer versions of Chrome. If the input is greater than 5 , alert window is diplayed but it cannot be closed, I have to close all Chrome window. How to fix ?
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script>
function validate(textarea)
{
var wanted = "12345"
var check ;
var x ;
for (var i=0; i<textarea.value.length; i++)
{
x = "" +textarea.value.substring(i, i+1);
if (wanted.indexOf(x) == "-1") check = "stop";
}
if ( check== "stop")
{
alert("use only numbers from 1 to 5 ");
textarea.focus();
textarea.select();
}
if (textarea.value.length > 1 )
{
alert("use only numbers from 1 to 5 ");
textarea.focus();
return (false);
}
}
</script>
</HEAD>
<BODY>
<FORM name="game" >
<table align="center" border="0" width="225" bgcolor="#FFFFF0" >
<TR><TD colspan="9">Fill the cells with digits 1-5, only one time each. </TD></TR>
<TR><TD><INPUT name="a1" size="1" value="" onBlur="validate(this)"><TD> <B> </B></TD>
<TD><INPUT name="a2" size="1" onBlur="validate(this)"></TD>
<TD><B> </B></TD>
<TD><INPUT name="a3" size="1" value="" onBlur="validate(this)">
</TD><TD><B> </B></TD>
<TD><INPUT name="a4" size="1" onBlur="validate(this)"></TD>
<TD><B> </B></TD>
<TD><INPUT name="a5" size="1" onBlur="validate(this)"></TD>
</TR>
</FORM>
</TABLE>
</BODY>
1 answers
solution1
2 ACCPTED 2017-01-04 13:41:30
Your script basically goes in an endless loop because of the double focus, besides that Chrome does has difficulties with alerts and focus:
when a number not 1 to 5 is detected, the stop if-event brings focus to the input. However the second if clause also focusses the element, which triggers the blur-event restarting the validating function.
Here an example that works. I've updated your validation code with a Regex . It checks if the value in the textarea matches 1-5 by doing a negative search. So if any value matches not 1-5 set check to stop .
After that I've added a timeout to the focus and select, which fires 5 milliseconds after the alert was fired, causing Chrome not to go in a blur-focus-loop.
Also I've added the maxlength -attribute to the inputs which limits the input to one character only.
function validate(textarea) { var wanted = "12345" var check; var x; if (textarea.value.match(/[^1-5]/g)) { check = "stop"; } if (textarea.value.length > 1 || check == "stop") { alert("use only one number from 1 to 5"); setTimeout(function() { textarea.focus(); textarea.select(); }, 5); return false; } }
<form name="game"> <table align="center" border="0" width="225" bgcolor="#FFFFF0"> <TR> <TD colspan="9">Fill the cells with digits 1-5, only one time each.</TD> </TR> <TR> <TD> <INPUT name="a1" size="1" maxlength="1" value="" onBlur="validate(this)" /> <TD> <B> </B> </TD> <TD> <INPUT name="a2" size="1" maxlength="1" onBlur="validate(this)" /> </TD> <TD> <B> </B> </TD> <TD> <INPUT name="a3" size="1" maxlength="1" value="" onBlur="validate(this)" /> </TD> <TD> <B> </B> </TD> <TD> <INPUT name="a4" size="1" maxlength="1" onBlur="validate(this)" /> </TD> <TD> <B> </B> </TD> <TD> <INPUT name="a5" size="1" maxlength="1" onBlur="validate(this)" /> </TD> </TR> </table> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.