Problem with Focus... Help needed.

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Nitin

    Problem with Focus... Help needed.

    Hi

    I have created function to check date and time. at the time of
    execution, if date is left empty the function returns the error
    message but then the focus goes to next field. Next filed is for time
    and there is also a check on that. If time is empty return error
    message. Again the explorer returns error message and then shifts the
    focus to date field, again error message and focus goes to time and
    this story goes on and on, untill browser is killed. can somebody help
    me in debuggin this script.

    Thanks a lot

    Nitin

    <head>
    </HEAD>
    <body>
    <script language=javasc ript>
    function CheckDate(sDate ) {
    var dateArray = sDate.value.spl it("/");
    if (!/^\d{2}\/\d{2}\/\d{2}$/.test(sDate.val ue)) {
    alert("Please enter a date in this format: dd/mm/yy.");
    sDate.focus();
    return false;
    }
    if (sDate.value.le ngth < 8 )
    {
    alert("Date in not valid format");
    sDate.focus();
    return false;
    }
    var now= new Date();
    var longYear= now.getYear();
    longYear= (longYear+"").s ubstring(2,4);
    if (dateArray[2] < longYear) {
    alert("Year "+dateArray[2]+" is wrong.");
    sDate.focus();
    return false;
    }
    if (dateArray[1] > 12 || dateArray[1] < 1) {
    alert("Month "+dateArray[1]+" is wrong.");
    sDate.focus();
    return false;
    }
    if (dateArray[1] == 1 || dateArray[1] == 3 || dateArray[1] == 5 ||
    dateArray[1] == 9 || dateArray[1] == 11){
    if (dateArray[0] > 30 || dateArray[0] < 1){
    alert("Date "+dateArray[0]+" in Month of "+dateArray[1]+" is
    wrong");
    sDate.focus();
    return (false);
    }
    }
    if (dateArray[1] == 4 || dateArray[1] == 6 || dateArray[1] == 7 ||
    dateArray[1] == 8||dateArray[1] == 10||dateArray[1] == 12){
    if (dateArray[0] > 31 || dateArray[0] < 1) {
    alert("Date "+dateArray[0]+" in Month of "+dateArray[1]+" is
    wrong");
    sDate.focus();
    return (false);
    }
    }
    if (dateArray[1] == 2 && dateArray[0] > 29 || dateArray[0] < 1) {
    alert("Date "+dateArray[0]+" in Month of "+dateArray[1]+" is
    wrong.");
    sDate.focus();
    return (false);
    }
    return (true);
    }
    function CheckTime(sTime ){
    if (!/^([01]?[0-9]|[2][0-3])([:][0-5][0-9])?$/.test(sTime.val ue))
    {
    alert("Please enter the Time in this format:\n\n
    hh:mm.");
    sTime.focus();
    return (false);
    }
    var timeArray = sTime.value.spl it(":");
    if (sTime.value.le ngth < 5 )
    {
    alert("Time in not valid format");
    sTime.focus();
    return (false);
    }
    if (sTime[0] > 23) {
    alert(" hrs is not possible in a day. Invalid time.");
    sTime.focus();
    return (false);
    }
    if (sTime[1] > 60) {
    alert ("mins is not possible in an hour. Invalid time.");
    sTime.focus();
    return (false);
    }
    return (true);
    }
    </script><HR><FOR M METHOD="POST"
    ACTION="/sso/cgi-bin/g100/g100_input_form .cgi/confirm"
    ENCTYPE="applic ation/x-www-form-urlencoded" NAME="input">
    <TABLE CELLSPACING="0" BORDER="0" CELLPADDING="5" WIDTH="100%"><T R
    ALIGN="left"><T D>Requestor</TD> <TD>Nitin Thakur</TD></TR>
    <TR ALIGN="left"><T D>Email</TD> <TD>nitin.thaku r@ubs.com</TD></TR>
    <TR ALIGN="left"><T D>Date (GMT) (dd/mm/yy)</TD> <TD><INPUT TYPE="text"
    NAME="startdate " VALUE="" SIZE=8 MAXLENGTH=8 ONBLUR="return
    CheckDate(this) "></TD></TR>
    <TR ALIGN="left"><T D>Time (GMT) 24 hrs format (hh:mm)</TD> <TD><INPUT
    TYPE="text" NAME="starttime " VALUE="" SIZE=5 MAXLENGHT="5"
    ONBLUR="return CheckTime(this) "></TD></TR>
    <BR>
    <TABLE CELLSPACING="0" BORDER="0" CELLPADDING="5" WIDTH="50%"><TR
    ALIGN="center"> <TD>
    <INPUT TYPE="submit" NAME="confirm" VALUE="Submit"
    </FORM></BODY></HTML>
  • Michael Winter

    #2
    Re: Problem with Focus... Help needed.

    On 16 Aug 2004 08:51:56 -0700, Nitin <nitin.thakur@u bs.com> wrote:
    [color=blue]
    > I have created function to check date and time. at the time of
    > execution, if date is left empty the function returns the error
    > message but then the focus goes to next field. Next filed is for time
    > and there is also a check on that. If time is empty return error
    > message. Again the explorer returns error message and then shifts the
    > focus to date field, again error message and focus goes to time and
    > this story goes on and on, untill browser is killed. can somebody help
    > me in debuggin this script.[/color]

    I don't believe that there's a problem with your script (I haven't taken a
    close look), I think it's your HTML.

    [snip]
    [color=blue]
    > <INPUT TYPE="text" NAME="startdate " VALUE="" SIZE=8 MAXLENGTH=8
    > ONBLUR="return CheckDate(this) "> [...][/color]

    The blur event is fired *every* time the control loses focus. So:

    1) Click or tab to next control (B)
    2) Current control (A) loses focus (event fires) and control B gains focus.
    3) Validation fails, alert shows error message and user dismisses it.
    4) Control A requests focus.
    5) Control B loses focus and control A gains focus.
    6) Validation for B fails, alert shows, and user dismisses it.
    7) B requests focus.
    8) Repeat from 3.

    The solution is to use the change event; the event will only fire if the
    value has actually changed. The user can skip a field without changing it,
    and you won't end up in a loop. Of course, this means that you'll need to
    validate the form at submission in case the user never enters a value.

    Hope that helps,
    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail

    Comment

    • Richard Cornford

      #3
      Re: Problem with Focus... Help needed.

      Michael Winter wrote:[color=blue]
      > Nitin wrote:[/color]
      <snip>[color=blue][color=green]
      >> <INPUT TYPE="text" NAME="startdate " VALUE="" SIZE=8
      >> MAXLENGTH=8 ONBLUR="return CheckDate(this) "> [...][/color]
      >
      > The blur event is fired *every* time the control loses focus. So:
      >
      > 1) Click or tab to next control (B)
      > 2) Current control (A) loses focus (event fires) and control B
      > gains focus. 3) Validation fails, alert shows error message
      > and user dismisses it.
      > 4) Control A requests focus.
      > 5) Control B loses focus and control A gains focus.
      > 6) Validation for B fails, alert shows, and user dismisses it.
      > 7) B requests focus.
      > 8) Repeat from 3.[/color]
      <snip>

      The same never ending loop is the consequence but in practice when an
      alert is put up the focus goes to the OK button on the alert, so control
      B loses focus at that point. Assuming that it has actually been passed
      focus at that point. I have a recollection of a browser where the onblur
      code is executed prior to the focusing of the next control, so when the
      onblur code re-focuses the first control the browser then goes on to do
      what it was planning anyway and focuses the next control, re-blurring
      the first.

      I too would recommend not attempting validation with onblur events.

      Richard.


      Comment

      • Michael Winter

        #4
        Re: Problem with Focus... Help needed.

        On Mon, 16 Aug 2004 18:28:31 +0100, Richard Cornford
        <Richard@litote s.demon.co.uk> wrote:

        [snip]
        [color=blue]
        > The same never ending loop is the consequence but in practice when an
        > alert is put up the focus goes to the OK button on the alert, so control
        > B loses focus at that point. [...][/color]

        I assumed that it would, but it doesn't appear to fire an event. At least
        not in my tests with Opera when an event is being executed. I didn't test
        with other browsers as Opera was sufficient for building the sequence I
        wrote.
        [color=blue]
        > I too would recommend not attempting validation with onblur events.[/color]

        That's more important, anyway.

        Mike

        --
        Michael Winter
        Replace ".invalid" with ".uk" to reply by e-mail

        Comment

        • Dr John Stockton

          #5
          Re: Problem with Focus... Help needed.

          JRS: In article <ff21db84.04081 60751.7d4e8f5b@ posting.google. com>,
          dated Mon, 16 Aug 2004 08:51:56, seen in news:comp.lang. javascript,
          Nitin <nitin.thakur@u bs.com> posted :[color=blue]
          >
          >I have created function to check date and time.[/color]

          One presumes that you are paid per yard of code; a much shorter date
          (and time) validator can be found via the FAQ : see below.

          Also see the recent thread here "Multiple Datepicker".

          You can I think solve your perceived problem by validating onChange
          rather than onBlur; but it would be better IMHO to validate when the
          user signals that data entry is completed.

          When posting code to News, it is your duty not to allow the system to
          wrap your code lines - anyway, you indent in units which are too large
          for convenience.

          HTML should also be indented to show structure, if people are to be
          expected to read it.

          You seem to ask for the time in GMT; the date also should be in GMT;
          then, for consistency, var longYear= now.getYear();
          should probably use getUTCyear()


          --
          © John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
          <URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
          <URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
          <URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

          Comment

          Working...