Client-side validation uses the same error display mechanism as server-side checking.
Validating input data on web pages is usually a function performed by the server.
The web page allows the user to enter data, and when the Submit button is pressed, the browser wraps up the data into an HTTP request and sends it to the server.
The server checks each data field to make sure it is valid, and if any problems are found, a new form along with error messages is sent back to the browser.
Wouldn't it be much more useful if problems could be detected in the browser before a server request is made? This approach would provide two primary advantages.
It would lighten the load on the server, and, more importantly, it would notify the user of a problem with a data field almost immediately after he or she entered the bad data.
This supports the truism that errors are cheapest to fix the closer the detection is to the original creation of the error.
For example, if there is a problem with a zip code field and the user is notified just after he enters the bad zip code, then he is still thinking about zip code and can easily make the correction.
If the user isn't notified until the server response comes back, he's already stopped thinking about zip code—his mind has moved on to other concerns.
This problem of context switching is especially difficult when the server returns errors for many different fields.
Now, Let me explain how to check client side validations using Java script
To test this code make a new website. Add a new page with name "Default" and Paste the code provided below.
You can also download code.
<%@ 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>Testing Client Side Validations.</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">
Testing Client Side Validations.<br />
<br />
<br />
<div>
Name :
<asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />
Email :
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
Web URL :
<asp:TextBox ID="txtWebURL" runat="server"></asp:TextBox><br />
Zip :
<asp:TextBox ID="txtZIP" runat="server"></asp:TextBox><br />
<br />
<asp:Button ID="btnSubmit" OnClientClick=" return validate()" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
Run you application and try to test the validations. You will find all the validations are raised before raising the server side event if submit button
Client side validations in C# using javascript
An IT Solution is a purpose and value-driven organization where everyone is empowered to take decisions in line with our culture. We provide a unique environment of freedom, flexibility & trust that allows an individuals potentials to flower; this results in tremendous growth opportunities.Such a culture, naturally, appeals to everyone. We listen, we think and we act. The IT field is all about thought leadership. We invest in thought for you as customers
2 comments:
Just some points
1. These I suppose are Alternative's to Validation Controls which already abstract a lot of Javascripts
2. There should be a configuration check which does not check for validation check if the user selects the CANCEL button instead of SUBMIT
3. For Low bandwidth connection areas and Low memory CPU (aka iPhone) it will better to not keep sending these validation scripts to the client.
Yes, u r right.
We are using this method the last so, many years for website development.
This is the fastest and efficient way to check validations.
Thanks,
Narender Singh
Post a Comment