Saturday 2 June 2012

Client Validations Using JavaScipt


Its shows validations done using pure javascript and it is not using any Validations controls provided by the .NET Framework 3.5
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">

          function calendarPicker(strField)
          {
           window.open('DatePicker.aspx?field=' + strField, 'calendarPopup', 'width=250,height=190,resizable=yes');

          }
        
          var flOrderNum=false;
          var flOrderDate=false;
          var flDeliveryDate=false;
          var flSupplierName=false;
          var flTotAmt = false;
         
          function DisplayValidations()
          {
              var reason="";
             
              reason += ValidateOrderNumber();
            
              reason += ValidateOrderDate();
              reason += ValidateDeliveryDate();
              reason += ValidateSupplierName();
        
              reason +=  ValidateTotalAmt();
           
           
            if(reason != "")
            {
              alert("Some fields need correction:\n\n" + reason + "\n") ;
           
              if(flOrderNum == true)
              {
           
               document.getElementById("txtOrderNumber").focus();
               flOrderNum=false;
               return false;
                 
              }
                          
            if(flOrderDate == true)
              {
               document.getElementById("pickOrderDate").focus();
               flOrderDate=false;
               return false;
              }
             
            if(flDeliveryDate == true)
             {
                 document.getElementById("pickDeliveryDate").focus();
                 flDeliveryDate=false;
                 return false;
             }
         
            if (flSupplierName == true)
             {
                 document.getElementById("dropSupplier").focus();
                 flSupplierName=false;
                 return false;
              
             }
        
            if(flTotAmt == true)
             {
                document.getElementById("txtTotalAmt").focus();
                flTotAmt=false;
                return false;
            
             }
         
          
           //  return false;

            }
             return true;
          }
         
          function ValidateOrderNumber()
          {
            var error="";
            var alphaExp = "o{1}[0-9]{5}";
            if(document.getElementById("txtOrderNumber").value.length==0)
            {
              error="Please enter the OrderNumber \n";
                  flOrderNum=true;         
        }else if(document.getElementById("txtOrderNumber").value.length != 6)
              {
               error="Wrong length of OrderNumber \n";
             
               flOrderNum=true;
              }             
              else if(validatereg()==false )
              {
                error="Wrong OrderNumber";
                 flOrderNum=true;
              }
            //alert(flOrderNum);
             
             return error;
            
          }
         
          function ValidateSupplierName()
          {
            var errSupplier="";
            if (document.getElementById("dropSupplier").value == 0)
            {
              errSupplier="\n Please select the Supplier";
              flSupplierName=true;
             
            }
            return errSupplier;
          }
      
         
  
         
          function ValidateOrderDate()
          {
            var errorOrder="";
            var Edate;
            Edate=new Date(document.getElementById("txtOrderDate").value); 
           
            var d=new Date();
           if(document.getElementById("txtOrderDate").value.length == 0)
            {
              errorOrder="\n Please enter the Order Date ";
              flOrderDate=true;      
            }
           else if(Edate.toDateString()!= d.toDateString() )
             {
              errorOrder= "\n Order Date is not Today's Date";
              flOrderDate=true;
             }
            
           return errorOrder;
         
              
         }
        
         function ValidateDeliveryDate()
         {
           var errorDelivery="";
           var Entereddate;
           Entereddate=new Date(document.getElementById("txtDeliveryDate").value); 
           
           var d=new Date();
           if(document.getElementById("txtDeliveryDate").value.length == 0)
           {
             errorDelivery="\n Please Enter the Delivery Date";    
             flDeliveryDate=true;
            }
                   else if(Entereddate.toDateString() < d.toDateString() )
           {
            
     errorDelivery= "\n Delivery Date should be greater than or equal to Today's Date";
             flDeliveryDate=true;
            
           }
         
         return errorDelivery;
               
         }
         
                
                 function ValidateTotalAmt()
                 {
                 var error="";
                 var totAmt=document.getElementById("txtTotalAmt").value ;
                 if(totAmt.length == 0)
                 {
                   error= "\n Please Enter the Totol Amount ";
                   flTotAmt=true;
                 }
                 else
                 {  if(totAmt>0 && totAmt < 9999.99)
                   {
                   }
                   else
                   { flTotAmt=true;
                     error="\n Please enter a valid Total Amount";
                    }
                  }
                 
                  return error;
                 }
         
         
         
          function validatereg()
          {
           var myRegExp = new RegExp("o{1}[0-9]{5}", "i")
           var str1=document.getElementById("txtOrderNumber").value;
       
           var result=myRegExp.test(str1);
           return result;
                   
          }
         
         
         
</script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <br />
        <br />
&nbsp; OrderNumber&nbsp;
        <asp:TextBox ID="txtOrderNumber" runat="server" MaxLength="6"></asp:TextBox>
        <br />
      &nbsp; OrderDate&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="txtOrderDate" runat="server" ReadOnly="True"></asp:TextBox>
        <a href="javascript:;" id="pickOrderDate" onclick="calendarPicker('form1.txtOrderDate');" title="Pick Date from Calendar">pick</a>
        <br />
&nbsp;
        <br />
&nbsp; Delivery Date&nbsp;
        <asp:TextBox ID="txtDeliveryDate" runat="server" ReadOnly="True"></asp:TextBox>
          <a href="javascript:;" id="pickDeliveryDate" onclick="calendarPicker('form1.txtDeliveryDate');" title="Pick Date from Calendar">pick</a>
     
        <br />
        <br />
&nbsp;Supplier Name
        <asp:DropDownList ID="dropSupplier" runat="server">
            <asp:ListItem Selected="True" Value="-1">Select Supplier</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
&nbsp;Total Amount&nbsp;&nbsp;
        <asp:TextBox ID="txtTotalAmt" runat="server"></asp:TextBox>
        <br />
        <br />
        <br />

        <asp:Button ID="Button1" runat="server" Text="Submit"  />
&nbsp;
        <asp:Button ID="Button2" runat="server" Text="Clear" OnClientClick="form1.reset(); return false;" />
     
        <br />
&nbsp;</div>
    </form>
</body>
</html>


using System.Xml.Linq;
using System.Data.SqlClient;


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

        if (!IsPostBack)
        {
            dropSupplier.Items.Add("Select Supplier:");

            String strconn;
            SqlCommand sqlcmd = new SqlCommand();
            SqlDataReader oReader;
            strconn = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
            SqlConnection oconn=new SqlConnection(strconn);
            oconn.Open();
        sqlcmd = new SqlCommand("select SupplierName from Supplier", oconn);
            oReader = sqlcmd.ExecuteReader();
      
           dropSupplier.DataSource = oReader;
              
           dropSupplier.DataTextField = "SupplierName";
              //  dropSupplier.DataValueField = "SupplierId";
          dropSupplier.DataBind();

        dropSupplier.Items.Insert(0, new ListItem("Select Supplier"string.Empty));

         Button1.Attributes.Add("OnClick", "DisplayValidations(); return false");


        }

    }


    protected void Page_PreRender(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, typeof(DropDownList), "focusOnDDL", "document.getElementById('dropSupplier').focus();", true);
    }

}


Below is the Calendar control :-

 <%@ Page Language="C#" AutoEventWireup="false" CodeFile="DatePicker.aspx.cs" Inherits="DatePicker" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server" method="post" >
    <div>
   
    </div>
    <asp:Calendar ID="Calendar1"  runat="server"  BackColor="#FFFFCC"
        BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest"
        Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px"
        ShowGridLines="True"
        Width="220px" >
        <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
        <SelectorStyle BackColor="#FFCC66" />
        <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
        <OtherMonthDayStyle ForeColor="#CC9966" />
        <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
        <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
        <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"
            ForeColor="#FFFFCC" />
    </asp:Calendar>
    </form>
</body>
</
html>
using System;
using
System.Collections;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
 public partial  class DatePicker : System.Web.UI.Page
{
    public void Page_Load(object sender, EventArgs e)
    {
    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        Calendar1.DayRender += new DayRenderEventHandler(Calendar1_DayRender);
    }
 private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{         
// Clear the link from this day
             e.Cell.Controls.Clear();
            // Add the custom link
             System.Web.UI.HtmlControls.HtmlGenericControl Link = new System.Web.UI.HtmlControls.HtmlGenericControl();
            Link.TagName = "a";
            Link.InnerText = e.Day.DayNumberText;
            Link.Attributes.Add("href", String.Format("JavaScript:window.opener.document.{0}.value = \'{1:d}\'; window.close();", Request.QueryString["field"], e.Day.Date));
             // By default, this will highlight today's date.
            if(e.Day.IsSelected)
            {
              Link.Attributes.Add("style", this.Calendar1.SelectedDayStyle.ToString());
            }
             // Now add our custom link to the page
            e.Cell.Controls.Add(Link);
}
 }

No comments:

Post a Comment