Kumar Nugalapu: 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

<title>Untitled Page</title>

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>

<div>

<br />

  OrderNumber 

<asp:TextBox ID="txtOrderNumber" runat="server" MaxLength="6"></asp:TextBox>

<br />

  OrderDate      

<asp:TextBox ID="txtOrderDate" runat="server" ReadOnly="True"></asp:TextBox>

<br />

  Delivery Date 

<asp:TextBox ID="txtDeliveryDate" runat="server" ReadOnly="True"></asp:TextBox>

<br />

 Supplier Name

<asp:DropDownList ID="dropSupplier" runat="server">

<asp:ListItem Selected="True" Value="-1">Select Supplier</asp:ListItem>

</asp:DropDownList>

<br />

 Total Amount  

<asp:TextBox ID="txtTotalAmt" runat="server"></asp:TextBox>

<br />

<asp:Button ID="Button1" runat="server" Text="Submit" />

<asp:Button ID="Button2" runat="server" Text="Clear" OnClientClick="form1.reset(); return false;" />

<br />

 </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">

<title>Untitled Page</title>

</head>

<body>

<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" >

<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);
}

}

Kumar Nugalapu

Saturday, 2 June 2012

Client Validations Using JavaScipt

No comments:

Post a Comment

About Me