Solved

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

Posted on 2004-08-13
5
1,263 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 125 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
great...  you got it working. But why is that "B" grade :((  ???
0
 

Author Comment

by:jmamer
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
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…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now