Client Side Validation with Java Script

Hello Friends today you will learn good thing which is mostly used in Companies by programmers

That’s Use of Java Script with Asp.net For client side validation

For this topic i will Give you Unique Article daily….

Today you learn simple validation with java script

This simple program will guide how to do client side validation of Form in JavaScript.

In this just make a form as follows:

  1. Name : <asp:TextBox ID=”txtName” />
  2. Email : <asp:TextBox ID=”txtEmail” />
  3. Web URL : <asp:TextBox ID=”txtWebUrl” />
  4. Zip : <asp:TextBox ID=”txtZip” />
  5. <asp:Button ID=”btnSubmit” OnClientClick=” return validate()”runat=”server” Text=”Submit” />

Now on the source code of this form in script tag write the following code:

<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://&#8221;
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>

And in code behind file just write the below code.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
btnSubmit.Attributes.Add(
“onclick”, “return validate()”
)
End Sub

Now you will get a form with proper validation.

I hope this is going to help you.

For more example can download sample from these links

1) http://www.aspdotnetfaq.com/Faq/How-to-control-ASP-NET-Validator-Controls-Client-Side-validation-from-JavaScript.aspx

2) http://www.dotnetspider.com/resources/3139-Enable-or-Disable-Asp-validation-control-using.aspx

3) http://www.dotnetfunda.com/articles/article113.aspx

4) http://www.aspsnippets.com/Articles/TextBox-Validation-using-JavaScript.aspx

5) http://articles.sitepoint.com/article/form-validation-client-side

6) http://www.java2s.com/Code/ASP/Validation-by-Control/UseJavascriptandaspvalidationcontroltogetherVBnet.htm

7) http://devcenter.infragistics.com/Articles/ArticleTemplate.Aspx?ArticleID=2183

8) http://www.codetoad.com/javascript/is_valid_email.asp

9) http://www.codedigest.com/Articles/ASPNET/221_Using_JavaScript_Effectively_in_ASPNet_20_–_PART_2.aspx

10) http://dotnetslackers.com/articles/aspnet/javascriptwithaspnetservercontrols.aspx

11) http://articles.techrepublic.com.com/5100-10878_11-5031730.html

12) http://ondotnet.com/pub/a/dotnet/2003/09/15/aspnet.html


Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s