Feel Tech Evolution: How To Add Client Side Validation in AjaxEnabled Site

Wednesday 22 February 2012

How To Add Client Side Validation in AjaxEnabled Site


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>

  <script language="javascript" type="text/javascript">
function validate()
{
    if (document.getElementById("<%=txtName.ClientID%>").value=="")
    {
               alert("Name Feild can not be blank");
               document.getElementById("<%=txtName.ClientID%>").focus();
               return false;
    }
    if(document.getElementById("<%=txtEmail.ClientID %>").value=="")
    {
               alert("Email id can not be blank");
              document.getElementById("<%=txtEmail.ClientID %>").focus();
              return false;
    }
   var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
   var emailid=document.getElementById("<%=txtEmail.ClientID %>").value;
   var matchArray = emailid.match(emailPat);
   if (matchArray == null)
  {
             alert("Your email address seems incorrect. Please try again.");
             document.getElementById("<%=txtEmail.ClientID %>").focus();
             return false;
  }
  if(document.getElementById("<%=txtWebURL.ClientID %>").value=="")
  {
             alert("Web URL can not be blank");
             document.getElementById("<%=txtWebURL.ClientID %>").value="http://"
             document.getElementById("<%=txtWebURL.ClientID %>").focus();
             return false;
  }
  var Url="^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"
  var tempURL=document.getElementById("<%=txtWebURL.ClientID%>").value;
  var matchURL=tempURL.match(Url);
   if(matchURL==null)
   {
             alert("Web URL does not look valid");
             document.getElementById("<%=txtWebURL.ClientID %>").focus();
             return false;
   }
   if (document.getElementById("<%=txtZIP.ClientID%>").value=="")
   {
             alert("Zip Code is not valid");
             document.getElementById("<%=txtZIP.ClientID%>").focus();
             return false;
   }
   var digits="0123456789";
   var temp;
   for (var i=0;i<document.getElementById("<%=txtZIP.ClientID %>").value.length;i++)
   {
             temp=document.getElementById("<%=txtZIP.ClientID%>").value.substring(i,i+1);
             if (digits.indexOf(temp)==-1)
             {
                      alert("Please enter correct zip code");
                      document.getElementById("<%=txtZIP.ClientID%>").focus();
                      return false;
             }
   }
   return true;
}
  </script>

</head>
<body>
  <form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server" />
      <div>
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
              <ContentTemplate>
                  <table>
                      <tr>
                          <td>
                              Name</td>
                          <td>
                              <asp:TextBox ID="txtName" runat="Server" />
                          </td>
                          <td>
                              Email</td>
                          <td>
                              <asp:TextBox ID="txtEmail" runat="Server" />
                          </td>
                          <td>
                              URL</td>
                          <td>
                              <asp:TextBox ID="txtWebURL" runat="Server" /></td>
                          <td>
                              Zip</td>
                          <td>
                              <asp:TextBox ID="txtZIP" runat="Server" />
                          </td>
                      </tr>
                  </table>
                  <asp:Button ID="DoButton" OnClick="DoButton_Click" runat="server" Text="Do something" />
              </ContentTemplate>
          </asp:UpdatePanel>
      </div>
  </form>
</body>
</html>


using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void DoButton_Click(object sender, EventArgs e)
    {
        //Do something on server side.
       
        string scripttext = "validate()";
        ScriptManager.RegisterStartupScript(Page, this.GetType(), "close", scripttext, true);

    }
}

Wednesday 22 February 2012

How To Add Client Side Validation in AjaxEnabled Site

No comments :