Friday, July 15, 2011

Client side validation Using Javascript

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

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

<script language="javascript" type="text/javascript">

function valid()

{

if(document.getElementById('TextBox1').value=="")

{

alert("blank");

document.getElementById('TextBox1').focus();

return false;

}

if(document.getElementById('TextBox1').value.length<3)

{

alert("short length");

document.getElementById('TextBox1').focus();

return false;

}

if(document.getElementById('TextBox2').value=="")

{

alert("again blank");

document.getElementById('TextBox2').focus();

return false;

}

if(document.getElementById('TextBox3').value=="")

{

alert("this field can not be blank")

document.getElementById('TextBox3').focus();

return false;

}

// if(document.getElementById('TextBox3').value!=document.getElementById('TextBox2').value)

// {

// alert("both field are not same")

// document.getElementById('TextBox3').focus();

// return false;

// }

var add=/^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;

var eadd=document.getElementById('TextBox3').value;

var myarray=eadd.match(add);

if(myarray==null)

{

alert("not in correct format");

document.getElementById('TextBox3').focus();

return false;

}

return true

}

script>

head>

<body>

<form id="form1" runat="server">

<div>

<br />

<asp:TextBox ID="TextBox1" runat="server">asp:TextBox>

<br />

<br />

<asp:TextBox ID="TextBox2" runat="server">asp:TextBox>

<br />

<br />

<asp:TextBox ID="TextBox3" runat="server">asp:TextBox>

<br />

<br />

<br />

<asp:Button ID="Button1" runat="server" Text="Button"

OnClientClick="return valid()" onclick="Button1_Click1" />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

div>

form>

body>

html>