Link to home
Start Free TrialLog in
Avatar of gbmcneil
gbmcneil

asked on

Using Focus() OnChange Using VBScript

One of the more useful techniques to validate a form on the client-side was described in this forum back in May, 2004. See the following:

https://www.experts-exchange.com/questions/20998327/Using-focus-onChange.html?query=Focus+OnChange&clearTAFilter=true

This topic described a technique to do client-side validation field by field, control by control, and resetting focus to a control (in this case, a textbox) if it failed to pass muster.

The secret was in the OnChange event, where multiple actions/events were specified -

<td align="right"><i><font color="#9900FF">Mobile</font></i></td>
<td>
<input name="mobile" type="text" id="mobile" size="20"
        onChange="verifyPhone(this);if(valid == 0){this.blur();this.select()}">
</td>

As you can see in the OnChange section, the variable "valid" is tested, and if it fails, the focus returns to the current textbox.

I have tried to use this snippet of code with VBScript as the called function rather than Javascript, but I can't get it to work. I think the problem is in the "if(valid ==0)" line.

Using VBScript, I think that you would have to set verifyPhone to false in the function  - not valid ==0.  But, if I try to say:

         onChange="verifyPhone(this); if verifyPhone = false{this.blur();this.select()}"

it fails. Do any of you Javascript experts know why?







Avatar of knightEknight
knightEknight
Flag of United States of America image

verifyPhone == false
>> As you can see in the OnChange section, the variable "valid" is tested, and if it fails, the focus returns to the current textbox.

to me that does not appear to be the result of this code ... to get this effect I think you need to change this.blur() to this.focus()
that is, if valid==0 then you want to focus back on the current textbox:

   onChange="verifyPhone(this);if(valid == 0){this.focus();this.select()}" />
Are you trying to convert this to VBScript?
also, the valid check, as well as the focus and select -- can more easily be done in the verifyPhone function rather than inline.  Show us that function and I will modify it accordingly.
VBScript:

onChange="verifyPhone(this)   if verifyPhone = false then   this.blur() this.select()   end if"

I don't know if ; will work in vbscript
Avatar of gbmcneil
gbmcneil

ASKER

Here is my code on the client side:

<Script Language = "VBScript">
Function verifyPhone(telnumber)
    'Test to see if phone number in format xxx-xxx-xxxx
    testpattern="\d{3}-\d{3}-\d{4}$"
    Set RegularExpressionObject = New RegExp
      With RegularExpressionObject
            .Pattern = testpattern
            .IgnoreCase = True
            .Global = True
      End With
      verifyPhone = RegularExpressionObject.Test(telnumber)
      Set RegularExpressionObject = nothing
End Function
</Script>

and here is the input textbox code in the HTML form -

<input id="txtPhoneNumber" onChange="verifyPhone(this);if (verifyPhone = false){this.blur();this.select()}">

There is no problem getting the "this.blur" and "this.select" portions of the code to work. Just pull out the "if (verifyPhone = false)" test and it runs. But, the code is worthless because we only want to reset focus back to the Phone Number textbox IF the verifyPhone is False. That is, if the phone number is NOT in the format xxx-xxx-xxxx.

If it passes validation we want focus to flow to the next textbox without interruption (i.e., don't execute this.blur and this.select).

Any ideas?


                        
The objective here isn't to move the Regular Expression from the VBScript function to the HTML tag line.

It is to call a VBScript validation function (any function). Then, reset focus depending on the result of that test. The test could be something where a Regular Expression isn't even used.
ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Because you are in the VBScript context you can even use IE referencing:

<input id="txtPhoneNumber" onChange="IF Not verifyPhone(document.all.txtPhoneNumber) Then setTimeout 'document.all.txtPhoneNumber.Select()', 10">

Thanks for your help, Zvonko. I think that you have provided a major piece of the puzzle.

However, your approach is not without problems as I continue to get errors.

Here is what I have found out thus far.

The only way I could get anything at all to run was to add the attribute:  Language = "VBScript", while the "setTimeout 'document.all.txtPhoneNumber.Select()', 10> portion of the script completely refuses to run.

Using the following tag as a test:

<input id="txtPhoneNumber" Language="VBScript" onChange="If Not verifyPhone
       (document.all.txtPhoneNumber) Then MsgBox verifyPhone
       (document.all.txtPhoneNumber)">

....I was able to run the validation function verifyPhone and retrieve its result. MsgBox verifyPhone tells me that the function works correctly depending on the format of the telephone number entered into the textbox.

Of course, the remaining problem is to reset focus to the txtPhoneNumber input control in order for the user to correct the data.

Do you think there is an alternative to:

".....    Then setTimeout 'document.all.txtPhoneNumber.Select()', 10>"    ?

which refuses to run? Or, something missing?

Conceptually the example cited in my first message accomplished it using Javascript by saying the equilvalent of this in VBScript -

".....    Then document.all.txtPhoneNumber.Blur() : document.all.txtPhoneNumber.Select() : End If">

But, the "equivalent thing" in VBScript doesn't want to run either.

Thanks to Zvonko, it seems like we have solved the toughest part, but focus still can't be redirected.

Any thoughts?













Focus() can also be handled.
But my recommendation is: Learn JavaScript!

I have no time just now for testing; I have to go to Systems trade fair in Munich.
Have a nice day.

IMO VBScript is more readable and maintainable.

Plus, I can now do a multi-lined VBScript in a tag.

<td><input id=categoryname class=dbnetedit Language="VbScript" OnChange="If Not verifyPhone(document.all.categoryname) Then : MsgBox verifyPhone(document.all.categoryname) : End If"></td>

Just need to figure out how to set focus back to this control.





 
Correction!  That should be:

<td><input id=categoryname class=dbnetedit Language="VbScript" OnChange="If Not verifyPhone(document.all.txtPhoneNumber) Then : MsgBox verifyPhone(document.all.txtPhoneNumber) : End If"></td>
The following runs without errors. But, it doesn't reset focus.

<td><input id=txtPhoneNumber Language="VbScript" OnChange="If Not verifyPhone(document.all.txtPhoneNumber) Then : document.all.txtPhoneNumber.blur() : document.all.txtPhoneNumber.select() : End If"></td>

Here is what I was able to do to get it running. I like the second approach better where the focus() is reset (to the field where the error occurred) in the called VBScript rather than the Tag line.

The SetTimeout turned out to be critical because it seemed to delay setting focus long enough for the ongoing events to take place.

Approach #1.

<Script Language = "VBScript">
Function verifyPhone(telnumber)
    'Test to see if phone number in format xxx-xxx-xxxx
    testpattern="\d{3}-\d{3}-\d{4}$"
    Set RegularExpressionObject = New RegExp
     With RegularExpressionObject
          .Pattern = testpattern
          .IgnoreCase = True
          .Global = True
     End With
     verifyPhone = RegularExpressionObject.Test(telnumber)
     Set RegularExpressionObject = nothing
End Function
</Script>

<td><input id=txtPhoneNumber Language="VBScript" OnBlur="If Not verifyPhone(Me)
            Then : setTimeout 'document.all.' + Me.id + '.Select()', 10, 'VBScript' : End
             If"></td>

Approach 2.

<Script Language = "VBScript">
Function verifyPhone(telnumber)
    'Test to see if phone number in format xxx-xxx-xxxx
    testpattern="\d{3}-\d{3}-\d{4}$"
    Set RegularExpressionObject = New RegExp
     With RegularExpressionObject
          .Pattern = testpattern
          .IgnoreCase = True
          .Global = True
     End With
     verifyPhone = RegularExpressionObject.Test(telnumber)
     Set RegularExpressionObject = nothing
     If verifyPhone = False Then
           setTimeout "document.all." + telnumber.id + ".Select()", 10, "VBScript"
     End If
End Function
</Script>

<td><input id=txtPhoneNumber Language="VBScript" OnBlur="verifyPhone(Me)"></td>




I am awarding the points to Zvonko. Thanks very much for your help.

He contributed the key elements of the final solution.
Thank you very much for posting your investigation results! I have learned much form them.

Of course you are right when using scripting language which you can best handle, but you surely also noticed that the default scripting language was JavaScript, even in IE browser.

See you around,
Zvonko