value check function starts endless loop

Discussion in 'Javascript' started by eyoung@ncsa.uiuc.edu, Aug 3, 2006.

  1. Guest

    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>
     
    , Aug 3, 2006
    #1
    1. Advertising

  2. Lee Guest

    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


    --
     
    Lee, Aug 3, 2006
    #2
    1. Advertising

  3. On 03/08/2006 17:59, wrote:

    > 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
     
    Michael Winter, Aug 3, 2006
    #3
  4. Guest

    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?

    Michael Winter wrote:
    > On 03/08/2006 17:59, wrote:
    >
    > > 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
     
    , Aug 3, 2006
    #4
  5. Guest

    str.focus(); stopped working when I use onChange...any ideas?
    Lee wrote:
    > 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
    >
    >
    > --
     
    , Aug 3, 2006
    #5
  6. Lee Guest

    said:
    >
    >str.focus(); stopped working when I use onChange...any ideas?
    >Lee wrote:
    >> 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


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


    --
     
    Lee, Aug 3, 2006
    #6
  7. Guest

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

    > Michael Winter wrote:
    > > On 03/08/2006 17:59, wrote:
    > >
    > > > 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
     
    , Aug 4, 2006
    #7
  8. RobG Guest

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


    --
    Rob
     
    RobG, Aug 4, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?QmlsbCBCb3Jn?=

    Endless loop on delete auth cookie/abandon session

    =?Utf-8?B?QmlsbCBCb3Jn?=, Feb 2, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    685
    =?Utf-8?B?QmlsbCBCb3Jn?=
    Feb 2, 2005
  2. Alexandre
    Replies:
    4
    Views:
    548
    Lasse Reichstein Nielsen
    Apr 12, 2005
  3. Leo
    Replies:
    1
    Views:
    427
    Thomas Heller
    Jul 4, 2003
  4. Claudio Grondi
    Replies:
    75
    Views:
    1,140
    Tim Peters
    Jan 21, 2006
  5. Isaac Won
    Replies:
    9
    Views:
    387
    Ulrich Eckhardt
    Mar 4, 2013
Loading...

Share This Page