value check function starts endless loop

[eyoung]

I have a function to check a string to make sure it is 6 digites using
the trigger onBlur="CkFrmt(this)"
Problem is I've got 4 fields in a row...if I enter a wrong number in
the first and hit tab I get the error message and my script tries to
move the focus to the first item...but because I hit the tab the focus
in already on the second item which does not contain a 6 digit value so
I must kill the page. help!

function CkFrmt(str)
{
if ( !Is_In_Format( str.value, "dddddd" ))
{
alert("You must enter a 6 digit number");
str.focus();
str.value="";
}
}
function Is_In_Format( str, format )
{
for ( var i = 0; i < format.length; i++ )
{
if ( format.charAt( i ) == "d" )
if ( !Is_Digit( str.charAt( i ) ) )
return false;
}
return true;
}
function Is_Digit( chr )
{
if ( ( chr < "0" ) || ( chr > "9" ) )
return false;
return true;
}
</script>

 

[Lee]

(e-mail address removed) said:

I have a function to check a string to make sure it is 6 digites using
the trigger onBlur="CkFrmt(this)"

Change that to onChange, instead of onBlur


--

 

[Michael Winter]

I have a function to check a string to make sure it is 6 digites using
the trigger onBlur="CkFrmt(this)"

It is rare that the blur event should be used to trigger validation
code. Use the change event, instead, and also validation in response to
the submit event, if necessary.

Problem is I've got 4 fields in a row...if I enter a wrong number in
the first and hit tab I get the error message and my script tries to
move the focus to the first item...but because I hit the tab the focus
in already on the second item which does not contain a 6 digit value so
I must kill the page.

That is one of the reasons why using the blur event is a bad idea.

function CkFrmt(str)
{
if ( !Is_In_Format( str.value, "dddddd" ))
{
alert("You must enter a 6 digit number");
str.focus();
str.value="";
}
}
function Is_In_Format( str, format )
{
for ( var i = 0; i < format.length; i++ )
{
if ( format.charAt( i ) == "d" )
if ( !Is_Digit( str.charAt( i ) ) )
return false;
}
return true;
}
function Is_Digit( chr )
{
if ( ( chr < "0" ) || ( chr > "9" ) )
return false;
return true;
}

All of that could be drastically simplified to:

function isValid(string) {
return /^\d{6}$/.test(string);
}

if (!isValid(someString)) {
alert("You must enter a six-digit number.");
}

Mike

 

[eyoung]

I would love to validate after the fact...each set of 6 numbers builds
on the last set...if the first set is wrong all sets are wrong.

What can I use instead of a blur?

 

[eyoung]

str.focus(); stopped working when I use onChange...any ideas?

 

[Lee]

(e-mail address removed) said:

str.focus(); stopped working when I use onChange...any ideas?

Your focus() call is probably coming just before the browser sets
focus to the next element. Try:
setTimeout("document.getElementById('"+str.id+"').focus()",100);
to add some delay. (that line is off the top of my head and so is untested).


--

 

[darwinist]

I would love to validate after the fact...each set of 6 numbers builds
on the last set...if the first set is wrong all sets are wrong.

What can I use instead of a blur?

If you want to use blur, and not allow them to progress until the
current value is valid, then you just need to keep track of which valid
values have been entered, and if the one before this one has not been
entered correctly just yet, do not validate this one.

Also I do something related and similar, using conditional blur/focus
behaviour with the javascript execution text box on my html desktop
system:
http://darwinist.googlepages.com/htmldesktop.html

Feel free to browse or use the source, it is well commented.

hth

 

[RobG]

I have a function to check a string to make sure it is 6 digites using
the trigger onBlur="CkFrmt(this)"
Problem is I've got 4 fields in a row...if I enter a wrong number in
the first and hit tab I get the error message and my script tries to
move the focus to the first item...but because I hit the tab the focus
in already on the second item which does not contain a 6 digit value so
I must kill the page. help!

The real killer is the combination of onblur(), alert() and focus().
Don't put focus back on the element, write a warning message next to
the input. Run validation again onsubmit and cancel submit if it
fails.

In general, avoid using alerts to interrupt the user's input -
particularly if the user is a seasoned data entry person or must put a
lot of validated data into a form.

Once those pitfalls are avoided, onblur becomes useful (gasp!) again.

function CkFrmt(str)
{
if ( !Is_In_Format( str.value, "dddddd" ))

Why use three functions when one will do:

if ( ! /^\d{6}$/.test(str)) {
/* error */
}

{
alert("You must enter a 6 digit number");
str.focus();
str.value="";

A hint on usability: it is really galling when I've just entered 5
digits and you wipe them out because I accidentally pressed 'tab'
instead of '1'. Leave the input there, let the user modify it. You
can use the input's maxlength attribute to restrict input to 6
characters too, e.g.:


<script type="text/javascript">

function checkFormat(el){
if ( ! /^\d{6}$/.test(el.value) ){
writeErr(el.name + '_msg', 'Input must be 6 digits');
return false;
}
writeErr(el.name + '_msg', '');
}

function writeErr(id, text){
var el = document.getElementById(id);
while (el.firstChild) {el.removeChild(el.firstChild);}
el.appendChild(document.createTextNode(text));
}

function validateForm(f){
var pass = true;
var fEl, fEls = f.elements;
for (var i=0, len=fEls.length; i<len; i++){
fEl = fEls;
if ('text' == fEl.type){
if (!checkFormat(fEls)) pass = false;
}
}
return pass;
}

</script>

<form onsubmit="return validateForm(this);" action="">
<input type="text" maxlength="6" onblur="checkFormat(this);"
name="val1"><span id="val1_msg" style="color:red;"></span>
<br>
<input type="text" maxlength="6" onblur="checkFormat(this);"
name="val2"><span id="val2_msg" style="color:red;"></span><br>
<input type="submit">
</form>