Solved

Using Focus() OnChange Using VBScript

Posted on 2004-10-18
18
888 Views
Last Modified: 2008-02-01
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:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20998327.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?







0
Comment
Question by:gbmcneil
  • 8
  • 6
  • 4
18 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 12341853
verifyPhone == false
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 12341864
>> 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()
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 12341876
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()}" />
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 12341880
Are you trying to convert this to VBScript?
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 12341890
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.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 12341903
VBScript:

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

I don't know if ; will work in vbscript
0
 

Author Comment

by:gbmcneil
ID: 12342397
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?


                        
0
 

Author Comment

by:gbmcneil
ID: 12342487
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.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 125 total points
ID: 12342660
You asked for this:

<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.value)
     Set RegularExpressionObject = nothing
End Function
</Script>





<form>
<input id="txtPhoneNumber" onChange="iF Not verifyPhone(document.forms(0).txtPhoneNumber) Then setTimeout 'document.forms(0).txtPhoneNumber.Select()', 10">
</form>

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 63

Expert Comment

by:Zvonko
ID: 12342697
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">

0
 

Author Comment

by:gbmcneil
ID: 12344413
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?













0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12345117
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.

0
 

Author Comment

by:gbmcneil
ID: 12346203
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.





 
0
 

Author Comment

by:gbmcneil
ID: 12346278
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>
0
 

Author Comment

by:gbmcneil
ID: 12346523
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>

0
 

Author Comment

by:gbmcneil
ID: 12350933
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>




0
 

Author Comment

by:gbmcneil
ID: 12350985
I am awarding the points to Zvonko. Thanks very much for your help.

He contributed the key elements of the final solution.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12352127
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

0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now