Solved

Client Validation (using Javascript) of Multiple Controls using CustomValidator and ValidationSummary

Posted on 2004-08-13
5
1,376 Views
Last Modified: 2012-05-05
I have a form where users must enter their address and phone number.  I am using the validationSummary control to display all of potential errors at the top of the page.  This has gone fine, until I ran into this little snag:

I have 3 text boxes for entering a phone number: 1 for the area code, 1 for the first 3 digits of the main number, and 1 for the last 4 digits of the main number.  To validate the phone number I therefore need to validate all 3 controls at the same time.  Each textbox must only contain numeric characters and be exactly the length it was designed to be. (3, 3, 4).

I obviously need to use a customvalidation control for this- and I think I need to use a client validation script (as opposed to a server validation script) for the customvalidation control to have the specified error message appear in the validation summary control.  But I have almost no experience with javascript (I *have* to use javascript, right? I can't use vb?) and am having a very difficult time getting this to work.  Here's some pared down sample code.  (I *believe* the problem is in the javascript- but I included the asp code too.  I don't think the variables in the javascript function are actually receiving the text that has been entered in the textboxes- i.e. this statement is not returning anything 'document.all.txtPhoneAC.value)  Currently the "Invalid Phone Number" error is always displayed.  Thanks in advance! -Jessica


JavaScript-

function ValidatePhone(sender, args)
    {
      var txtAC =  document.all.txtPhoneAC.value;
      var txtPhone1 = document.all.txtPhone1.value;
      var txtPhone2 = document.all.txtPhone2.value;
      if isNan(txtAC) or isnan(txtphone1) or isnan(txtPhone2) or txtac.length <> 3 or txtphone1.length <> 3 or txtPhone2.length <> 3
        {args.IsValid = false;          
        }

      args.IsValid = true;
           return;
    }

ASP-
<asp:Table Runat="server" CssClass="maintbl" ID="Table1" NAME="Table1">
<asp:TableRow >
      <asp:TableCell>
            <asp:ValidationSummary ID ="vs" Runat="server" HeaderText="You must fix the following errors to continue:" DisplayMode="List" ></asp:ValidationSummary>
      </asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:RequiredFieldValidator ID="rfvAddress" Runat="server" Display="None" ControlToValidate="txtAddress" ErrorMessage="You must Enter a TPA address"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvCity" Runat="server" Display="None" ControlToValidate="txtCity" ErrorMessage="You must Enter a TPA city"></asp:RequiredFieldValidator>

ETC.ETC.
<asp:CustomValidator Display="None" ErrorMessage="Invalid Phone Number" ID="cvPhone" ValidationFunction="ValidatePhone" Runat="server" ></asp:CustomValidator>

<asp:Table CellPadding="0" CellSpacing="0" CssClass="maintbl" Runat="server" ID="Table6">
  <asp:tablerow>
      <asp:tablecell Width="125" horizontalalign="right" verticalalign="Bottom" cssclass="label">Company</asp:tablecell>
      <asp:TableCell Width="10"></asp:TableCell>
      <asp:tablecell>            
            <asp:TextBox ID="txtCompany" Runat="server" CssClass="text_box" MaxLength="50"></asp:TextBox>
      </asp:tablecell>
  </asp:tablerow>
  <asp:tablerow>
      <asp:tablecell horizontalalign="right" verticalalign="Bottom" cssclass="label">Address</asp:tablecell>
      <asp:TableCell Width="10"></asp:TableCell>
      <asp:TableCell>
            <asp:TextBox ID="txtAddress" Runat="server" CssClass="text_box" MaxLength="50"></asp:TextBox>
      </asp:TableCell>
</asp:tablerow>

ETC. ETC.

<asp:tablerow>
      <asp:tablecell horizontalalign="right" verticalalign="Bottom" cssclass="label">Phone</asp:tablecell>
      <asp:TableCell Width="10"></asp:TableCell>
      <asp:tablecell>
            <asp:TextBox ID="txtPhoneAC" CssClass="textbox" Width="30" MaxLength="3" Runat="server"></asp:TextBox>
            &nbsp;                                                                        
            <asp:TextBox ID="txtPhone1" CssClass="textbox" Width="30" MaxLength="3" Runat="server"></asp:TextBox>
            &nbsp;
            <asp:TextBox ID="txtPhone2" CssClass="textbox" Width="55" MaxLength="4" Runat="server"></asp:TextBox>
      </asp:tablecell>
</asp:tablerow>

</table>
0
Comment
Question by:jmamer
[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
  • 2
  • 2
5 Comments
 
LVL 18

Accepted Solution

by:
DotNetLover_Baan earned 125 total points
ID: 11798080
Hi Jessica,
instead use...
   var txtAC = document.getElementById('txtPhoneAC').value;
   var txtPhone1 = document.getElementById('txtPhone1').value;
   var txtPhone2 = document.getElementById('txtPhone2').value;
....
....

-Baan
0
 
LVL 1

Assisted Solution

by:greenlantern0
greenlantern0 earned 125 total points
ID: 11813205
It also seems that you're checking txtPhone2.length to not equal 3 when according to your business logic it should check that it doesn't equal 4.
i.e. txtPhone2.length <> 4

Even after you use your if clause... and set args.IsValid to false... it then drops down and sets it back to true again. (given the code displayed) I think you should put a "return" statement after you set IsValid to false.

That's what I can see from just looking over it a little bit. Hope that helps....
0
 

Author Comment

by:jmamer
ID: 11815378
Thanks to both of you...  Your suggestions helped.  There proved to be a whole lot wrong with that javascript function including the conditional syntax I was using... and the whole case sensitive thing.  Here is the working version:

      function ValidatePhone(sender, args)
    {
             var txtAC = document.getElementById('txtPhoneAC').value;
             var txtPhone = document.getElementById('txtPhone1').value;
             var txtPhone2 = document.getElementById('txtPhone2').value;
             if (isNaN(txtAC) || isNaN(txtPhone) || txtAC.length!=3 || txtPhone.length!=3 || isNaN(txtPhone2) || txtPhone2.length!=4)
                  {
                  args.IsValid = false;
                  }
             else
                  {
                        args.IsValid = true;
                  }
    }
0
 
LVL 18

Expert Comment

by:DotNetLover_Baan
ID: 11815403
great...  you got it working. But why is that "B" grade :((  ???
0
 

Author Comment

by:jmamer
ID: 11815449
Sorry!  I thought since both of you gave me pieces of the answer-- but both of you missed some stuff too-- that it was worth a B.  B doesn't hurt, does it?  I really do appreciate the help you gave me.
0

Featured Post

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!

Question has a verified solution.

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

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

763 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