CODEDIGEST
Home » CodeDigest
Search
 

Technologies
 

ClientValidation-JavaScript
Submitted By Gaurav Arora
On 3/1/2009 9:53:03 AM
Tags: asp.net,CodeDigest,JavaScript  

There are many ways to handle client side validation. But, I have some tricky ways described in the following snippet.

Step(s) :

  1. Choose any editor to write your code.
  2. It may be VS.net 2008 or prior(before Beta).
  3. Create a design page as per following line(s):

<asp:table runat="server" id="tblForm" cellpadding="0" cellspacing="0" width="95%"
    horizontalalign="Center" visible="false">
 
 <asp:tablerow runat="server">
  <asp:tablecell runat="server" CssClass="clsForm">
   <Div id ="Medicadiv" CssClass="clsForm" style="color:Red;">  
   </div>
  </asp:tablecell>
 </asp:tablerow>
  <asp:tablerow runat="server">
   <asp:tablecell runat="server" CssClass="clsForm">

      <asp:table runat="server" cellpadding="0" cellspacing="0" id="tblMedicaProfile">
       <asp:tablerow runat="server" id="MedicaPhone" cssclass="clsForm" >
        <asp:tablecell runat="server" ID="Tablecell39" ColumnSpan="2">
         <asp:RadioButton runat="server" onclick="HideControl(this)" id="radMedicaPhone" cssclass="clsForm"
          font-bold="True" Text="Phone# "></asp:RadioButton>
        </asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell40" ColumnSpan="3">
         <cc1:whphone runat="server" id="ccMedicaPhone"  />
        </asp:tablecell>
       </asp:tablerow>
       <asp:tablerow runat="server" id="MedicaTimetocall" cssclass="clsForm" >
        <asp:tablecell runat="server" ID="Tablecell41" Width="20"></asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell42">
         <asp:label runat="server" id="lblMedicaTimetocall" font-bold="True" cssclass="clsForm" text="Best Time to Call " />
        </asp:tablecell>
        <asp:tablecell runat="server" cssclass="clsForm" ID="Tablecell43" ColumnSpan="3">
         <asp:textbox runat="server" id="txtMedicaTimetocall" maxlength="2" width="20" cssclass="clsForm" />
         
         <asp:dropdownlist runat="server" id="ddlMedicaTimetocall" cssclass="clsForm">
          <asp:listitem value="am">a.m.</asp:listitem>
          <asp:listitem value="pm">p.m.</asp:listitem>
         </asp:dropdownlist>
        
        </asp:tablecell>
       </asp:tablerow>
       <asp:tablerow runat="server" id="MedicaEmail" cssclass="clsForm" onprerender="IsMedicaVisible">
        <asp:tablecell runat="server" ID="Tablecell44" ColumnSpan="2">
         <asp:RadioButton runat="server" onclick="HideControl(this)" id="radMedicaEMail" cssclass="clsForm"
          font-bold="True" Text="E-mail Address "></asp:RadioButton>
        </asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell45" ColumnSpan="3">
         <asp:textbox id="txtMedicaEmail" maxlength="60" width="200px" cssclass="clsForm" runat="server"  />         
        </asp:tablecell>
       </asp:tablerow>
       <asp:tablerow runat="server" id="MedicaMail" cssclass="clsForm" onprerender="IsMedicaVisible">
        <asp:tablecell runat="server" ID="Tablecell46" ColumnSpan="5">
         <asp:RadioButton runat="server" onclick="HideControl(this)" id="radMedicaMail" cssclass="clsForm"
          font-bold="True" Text="Mail "></asp:RadioButton>
        </asp:tablecell>
       </asp:tablerow>
       <asp:tablerow runat="server" id="MedicaAddress1" cssclass="clsForm" onprerender="IsMedicaVisible">
        <asp:tablecell runat="server" ID="Tablecell47" Width="20"></asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell48">
         <asp:label runat="server" id="MedicalblAddress" font-bold="True" cssclass="clsForm" text="Address" />
        </asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell49" ColumnSpan="3">
         <asp:textbox runat="server" id="txtMedicaAddress1" maxlength="60" width="60%" cssclass="clsForm" />         
        </asp:tablecell>
       </asp:tablerow>
       <asp:tablerow runat="server" id="MedicaCity" cssclass="clsForm">
        <asp:tablecell runat="server" ID="Tablecell50" Width="20"></asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell51">
         <asp:label runat="server" id="lblMedicaCity" font-bold="True" cssclass="clsForm" text="City" />
        </asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell52" ColumnSpan="3">
         <asp:textbox runat="server" id="txtMedicaCity" maxlength="50" width="60%" cssclass="clsForm" />         
        </asp:tablecell>
       </asp:tablerow>
       <asp:tablerow runat="server" id="MedicaState" cssclass="clsForm">
        <asp:tablecell runat="server" ID="Tablecell53" Width="20"></asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell54">
         <asp:label runat="server" id="lblMedicaState" font-bold="True" cssclass="clsForm" text="State" />
        </asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell55">
         <asp:dropdownlist runat="server" id="ddlMedicaState" cssclass="clsForm" />         
        </asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell56">
         <asp:label runat="server" id="lblMedicaPostalcode" font-bold="True" cssclass="clsForm" text="Zip Code" />
        </asp:tablecell>
        <asp:tablecell runat="server" ID="Tablecell57">
         <asp:textbox runat="server" id="txtMedicaPostalcode" maxlength="10" width="100" cssclass="clsForm" />         
        </asp:tablecell>
       </asp:tablerow>
       <asp:tablerow runat="server" id="MedicaWish" cssclass="clsForm">
        <asp:tablecell runat="server" ID="Tablecell58" ColumnSpan="5">
         <asp:RadioButton runat="server" onclick="HideControl(this)" id="radMedicaWish" cssclass="clsForm" visible="false"
          font-bold="True" Text="I do not wish to be contacted at this time "></asp:RadioButton>          
        </asp:tablecell>
       </asp:tablerow>
      </asp:table>
     </asp:tablecell>
    </asp:tablerow>
   </asp:table>
</asp:tablecell> </asp:tablerow> </asp:table>

  1. To handle client side validation, you can choose Validations too
  2. Here is some tricky, methods to handle the same.
  3. Add following javascript method(s):

<script language="javascript">
  
 function HideControl(oControl)
    {
     var rbMedicaPhone = document.getElementById('<%= radMedicaPhone.ClientID %>');
     var rbMedicaEMail = document.getElementById('<%= radMedicaEMail.ClientID %>');
     var rbMedicaMail = document.getElementById('<%= radMedicaMail.ClientID %>');
 
     var tbMedicaPhone = document.getElementById('<%= ccMedicaPhone.ClientID %>');
     var tbMedicaTimetocall = document.getElementById('<%= MedicaTimetocall.ClientID %>');
     var tbMedicaEmail = document.getElementById('<%= txtMedicaEmail.ClientID %>');
     var tbMedicaAddress1 = document.getElementById('<%= MedicaAddress1.ClientID %>');
     var tbMedicaCity = document.getElementById('<%= MedicaCity.ClientID %>');
     var tbMedicaState = document.getElementById('<%= MedicaState.ClientID %>');
     var tbMedicaPostalcode = document.getElementById('<%= txtMedicaPostalcode.ClientID %>');
    
     switch(oControl.id){
  case '<%= radMedicaPhone.ClientID %>':
   if (rbMedicaPhone.checked)
   {
    tbMedicaPhone.style.display = "block";           
    tbMedicaTimetocall.style.display = "block";
    tbMedicaEmail.style.display = "none";
    tbMedicaAddress1.style.display = "none";
    tbMedicaCity.style.display = "none";
    tbMedicaState.style.display = "none";
    tbMedicaPostalcode.style.display = "none";
    rbMedicaEMail.checked = false;
    rbMedicaMail.checked = false;
    //rbMedicaWish.checked = false;
            
   }
  break;
  case '<%= radMedicaEMail.ClientID %>':
   if (rbMedicaEMail.checked)
   {
    tbMedicaEmail.style.display = "block";
    tbMedicaPhone.style.display = "none";           
    tbMedicaTimetocall.style.display = "none";
    tbMedicaAddress1.style.display = "none";
    tbMedicaCity.style.display = "none";
    tbMedicaState.style.display = "none";
    tbMedicaPostalcode.style.display = "none";
    rbMedicaPhone.checked = false;
    rbMedicaMail.checked = false;
    //rbMedicaWish.checked = false;
        document.getElementById("<%=txtMedicaEmail.ClientID%>").disabled=false;
          
   }
  break;
  case '<%= radMedicaMail.ClientID %>':
   if (rbMedicaMail.checked)
   {
    tbMedicaAddress1.style.display = "block";
    tbMedicaCity.style.display = "block";
    tbMedicaState.style.display = "block";
    tbMedicaPostalcode.style.display = "block";
    tbMedicaEmail.style.display = "none";
    tbMedicaPhone.style.display = "none";           
    tbMedicaTimetocall.style.display = "none";
    rbMedicaPhone.checked = false;
    rbMedicaEMail.checked = false;
    //rbMedicaWish.checked = false;
   }
  break;
  
     }
}

function checkRadio()
{
  var rbMedicaPhone = document.getElementById('<%= radMedicaPhone.ClientID %>');
     var rbMedicaEMail = document.getElementById('<%= radMedicaEMail.ClientID %>');
     var rbMedicaMail = document.getElementById('<%= radMedicaMail.ClientID %>');
 
  var ccMedicaPhone = document.getElementById("mForm_ccMedicaPhone_txtPhone").value;
  var txtMedicaEmail = document.getElementById("<%=txtMedicaEmail.ClientID%>").value;
  var txtMedicaTimetocall = document.getElementById("<%=txtMedicaTimetocall.ClientID%>").value;
  var txtMedicaAddress1 = document.getElementById("<%=txtMedicaAddress1.ClientID%>").value;
  var txtMedicaCity = document.getElementById("<%=txtMedicaCity.ClientID%>").value;
  var ddlMedicaState = document.getElementById("<%=ddlMedicaState.ClientID%>");   
  var txtMedicaPostalcode = document.getElementById("<%=txtMedicaPostalcode.ClientID%>").value;
  
  var rfvPhone = document.getElementById("mForm_ccMedicaPhone_rfvPhone");    
  var validEmail=/^(\w+((-\w+)|(\.\w+)|(\+\w+))*\@\w+((\.|-|\+)\w+)*\.\w+)|([n|N][o|O] ([e|E][m|M][a|A][i|I][l|L]))/;
  var validTimetocall = /([1][0-2])|([1-9])/;
  var validPostalCode = /^\d{6}|\d{5}-\d{4}|\d{5}-\d{3}|\d{5}|\d{4}|\d{3}-\d{4}|[a-zA-Z]\d\s?\d[a-zA-Z]{2}|[a-zA-Z]{2}\d\s?\d[a-zA-Z]{2}|[a-zA-Z]\d{2}\s?\d[a-zA-Z]{2}|[a-zA-Z]{2}\d{2}\s?\d[a-zA-Z]{2}/;
 
  var Medicadiv = document.getElementById("Medicadiv");
  Medicadiv.innerHTML = "<br/>Please provide values for following field(s):<br/>";
  Medicadiv.style.display = "none";
  var blnRes;
  blnRes = false; 
 
 
   
  if (!(rbMedicaPhone.checked) || !(rbMedicaEMail.checked) || !(rbMedicaMail.checked))
  {
  Medicadiv.innerHTML = "<br/>Please provide values for following field(s):<br/>";
  Medicadiv.style.display = "none";
  blnRes = true;
  }
  if(rbMedicaPhone.checked)
  {  
  
  if(ccMedicaPhone == '')
  {
   //alert("Please provide Phone.");
   Medicadiv.innerHTML += "<ul><li>Phone.</li></ul>";    
   Medicadiv.style.display = "block";
   
   blnRes = false;
  }  
  
  else
  {
   Medicadiv.innerHTML = "<br/>Please provide values for following field(s):<br/>";
   Medicadiv.style.display = "none";
   blnRes = true;
  
  }
  
  if(txtMedicaTimetocall=='')
  {
   //alert("Please provide Best Time to Call.");
   Medicadiv.innerHTML += "<ul><li>Best Time to Call.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes = false;
  }
  else if((!validTimetocall.test(txtMedicaTimetocall)) || (txtMedicaTimetocall > 12))
  {
   //alert("Best Time to Call is incorrectly formatted (should be of the form 1 or 12) or contains invalid characters.");
   Medicadiv.innerHTML += "<ul><li>Best Time to Call is incorrectly formatted (should be of the form 1 or 12) or contains invalid characters.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes = false;
  }
  else
  {
   Medicadiv.innerHTML = "<br/>Please provide values for following field(s):<br/><ul>";
   Medicadiv.style.display = "none";
   blnRes = true;  
  }
  
  }
  if (rbMedicaEMail.checked)
  {
  if(txtMedicaEmail == '')
  {
   //alert("Please provide Email Address.");
   Medicadiv.innerHTML += "<ul><li>Email Address.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes = false;
  }
  else if(!validEmail.test(txtMedicaEmail))
  {
   Medicadiv.innerHTML += "<ul><li>The email address is either incorrectly formatted (should be of the form a@b.c) or contains invalid characters.</li></ul>";    
   Medicadiv.style.display = "block";
   //alert("The email address is either incorrectly formatted (should be of the form a@b.c) or contains invalid characters.");
   blnRes = false;
  }
  else
  {
   Medicadiv.innerHTML = "<br/>Please provide values for following field(s):<br/>";
   Medicadiv.style.display = "none";
   blnRes = true;
  }
  }
 
  if (rbMedicaMail.checked)
  {
  var blnRes1,blnRes2,blnRes3, blnRes4;
   
   if (txtMedicaPostalcode=='')
  {
   //alert("Please provide Zip.");
   Medicadiv.innerHTML += "<ul><li>Zip.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes1 = false;
  }
  
  else if(!validPostalCode.test(txtMedicaPostalcode))
  {
   
   Medicadiv.innerHTML += "<ul><li>Zip Code is incorrectly formatted <br>(should be of the form 55555, 55555-5555, 55555-555, A5555AAA, or A5A 5A5)<br> or contains invalid characters.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes1 = false;
  }
  else
  {
   Medicadiv.innerHTML = "<br/>Please provide values for following field(s):<br/>";
   Medicadiv.style.display = "none";
   blnRes1 = true;
  }
  
  if(txtMedicaAddress1 =='')
  {
   
   Medicadiv.innerHTML += "<ul><li>Address.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes2 = false;
  }
  else
  {
   
   Medicadiv.style.display = "none";
   blnRes2 = true;
   
  }

  if(txtMedicaCity == '')
  {
   
   Medicadiv.innerHTML += "<ul><li>City.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes3 = false;
  }
  else
  {
   
   Medicadiv.style.display = "none";
   blnRes3 = true;
   
  }
  
  if ((ddlMedicaState.options[ddlMedicaState.selectedIndex].value==0))
  {
   
   Medicadiv.innerHTML += "<ul><li>State.</li></ul>";    
   Medicadiv.style.display = "block";
   blnRes4 = false;
  }
  
  else
  {
   
   Medicadiv.style.display = "none";
   blnRes4 = true;
   
  }
  
  if((blnRes1==true) && (blnRes2==true) && (blnRes3==true) && (blnRes4==true))
   {
    Medicadiv.style.display = "none";
    blnRes=true;
   }
  else
   {
    Medicadiv.style.display = "block";
    blnRes=false;
   }
  
  } 
 
  return blnRes;
}

  var oControls = document.getElementById("mForm_btnDone_Icon");
  if (oControls !=null)
  {
  oControls.onclick = checkRadio;
  }
  oControls = document.getElementById("mForm_btnDone_ImageText");
  if (oControls !=null)
  {
  oControls.onclick = checkRadio;
  }
 
 
</script>

Execution :

  • Start your preferred VS.Net
  • Load the file.
  • Build/Run the project.
  • Try to check validations by performing some nuinsense actions.
Note:
  • Above is tested only at Visual Studio 2005
  • Page can't be posted back
  • Everything handled at client side.
Do you have a working code that can be used by anyone? Submit it here. It may help someone in the community!!
Recent Codes
  • Convert DateTime to Different TimeZone in C#, ASP.Net
    		•
  • Get Month Name and Day name for a Date in C#, ASP.Net
    		•
  • Format DateTime based on Country or Culture in C#, ASP.Net
    		•
  • Get All Language-Country Code List for all Culture in C#, ASP.Net
    		•
  • How to strip HTML tags, HTML Encode and Decode HTML string using jQuery/JavaScript in ASP.Net?
    		•
  • How to search a folder or file under a directory using wildcard in C#?
    		•
  • Disable or Make a ListItem Non selectable ASP.Net DropDownList
  • Block or Disable Cut, Copy and Paste operation in ASP.Net TextBox Using jQuery
    		•
  • How to split string using C#?
    		•
  • How to check if a String is Integer in C#? (Part 2)
    		•
    View All Codes..
     
    www.codedigest.com. All articles are posted "AS IS" with no warranties. All articles are posted for educational purpose only and individual authors are responsible for their article. Please mail admin@codedigest.com for any queries or compliants.
    Disclaimer  Terms and Condition  Privacy Policy  Contact Us   Our network websites: ChennaiOnNet.Com