Client Side Validation using JavaScript in ASP.NET
In this article, we are validating the textbox on
the client side , here we are using
three textbox first for company name, contact email and company web site , now we are using a required filed validator for all the textbox
and for the contact email we are using also email validation and same company
web site we are using url validation.
Design:-
Source Code :-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="client.aspx.cs" Inherits="client" %>
<!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>Client
Side Validation using JavaScript</title>
<script type="text/javascript">
function
validation() {
if
(document.getElementById("<%=txtcompanyname.ClientID%>").value
== "") {
alert("Please
enter the company name");
document.getElementById("<%=txtcompanyname.ClientID%>").focus();
return
false;
}
if
(document.getElementById("<%=txtcontactemail.ClientID
%>").value
== "") {
alert("Please
enter the contact email");
document.getElementById("<%=txtcontactemail.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("<%=txtcontactemail.ClientID
%>").value;
var
matchArray = emailid.match(emailPat);
if
(matchArray == null) {
alert("Please
choose correct format");
document.getElementById("<%=txtcontactemail.ClientID
%>").focus();
return
false;
}
if
(document.getElementById("<%=txtwebsiteurl.ClientID
%>").value
== "") {
alert("Please
enter the company url");
document.getElementById("<%=txtwebsiteurl.ClientID
%>").value
= "http://"
document.getElementById("<%=txtwebsiteurl.ClientID
%>").focus();
return false;
}
var
Url = "^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"
var
tempURL = document.getElementById("<%=txtwebsiteurl.ClientID%>").value;
var
matchURL = tempURL.match(Url);
if
(matchURL == null) {
alert("Please
choose correct format");
document.getElementById("<%=txtwebsiteurl.ClientID
%>").focus();
return
false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 300px;">
<legend>Client-side
validation using java scipt </legend>
<table>
<tr>
<td>
Company Name
</td>
<td>
<asp:TextBox ID="txtcompanyname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Contact Email
</td>
<td>
<asp:TextBox ID="txtcontactemail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Company website
</td>
<td>
<asp:TextBox ID="txtwebsiteurl" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Sumbit"
OnClientClick=" return
validation()"/>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Code behind (C#):-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
public partial class client : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
btnSubmit.Attributes.Add("onclick", "return
validation()");
}
}
Out Put:-
Client Side Validation using JavaScript in ASP.NET
Reviewed by NEERAJ SRIVASTAVA
on
6:47:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
6:47:00 PM
Rating:
No comments: