Solved

Using Focus() OnChange Using VBScript

Posted on 2004-10-18
18
930 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

734 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