Question: Validate number javascript doesn't work in Chrome

Question

Validate number javascript doesn't work in Chrome

Answers 1
Added at 2017-01-04 14:01
Tags
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>&nbsp;</B></TD>
    <TD><INPUT  name="a2" size="1" onBlur="validate(this)"></TD>
  <TD><B>&nbsp;</B></TD>
   <TD><INPUT  name="a3" size="1"  value="" onBlur="validate(this)">
  </TD><TD><B>&nbsp;</B></TD>
  <TD><INPUT  name="a4" size="1" onBlur="validate(this)"></TD>
   <TD><B>&nbsp;    </B></TD>
  <TD><INPUT  name="a5" size="1" onBlur="validate(this)"></TD>
     </TR>

  </FORM>

 </TABLE>
  </BODY>
Answers
nr: #1 dodano: 2017-01-04 14:01

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>&nbsp;</B>
        </TD>
        <TD>
          <INPUT name="a2" size="1" maxlength="1" onBlur="validate(this)" />
        </TD>
        <TD>
          <B>&nbsp;</B>
        </TD>
        <TD>
          <INPUT name="a3" size="1" maxlength="1" value="" onBlur="validate(this)" />
        </TD>
        <TD>
          <B>&nbsp;</B>
        </TD>
        <TD>
          <INPUT name="a4" size="1" maxlength="1" onBlur="validate(this)" />
        </TD>
        <TD>
          <B>&nbsp;</B>
        </TD>
        <TD>
          <INPUT name="a5" size="1" maxlength="1" onBlur="validate(this)" />
        </TD>
    </TR>
  </table>
</form>

Source Show
◀ Wstecz