Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2004-08-13
5
Medium Priority
?
1,466 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
  • 2
  • 2
5 Comments
 
LVL 18

Accepted Solution

by:
DotNetLover_Baan earned 375 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 375 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

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…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …

972 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