Total members 11889 |It is currently Thu Mar 28, 2024 11:42 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





Many times it is desirable to perform javascript validation before submitting a page to the web server. For simple validations client side javascript validation is sufficient. However, in complex scenarios, server side validation may be required and client side javascript will not suffice. In such scenarios, typically postbacks must be performed in order to do the server side validation. In many cases, the developer may not want the page to be posted back for vallidations, because the page state may be lost and the user experience may not be the smoothest. This is where AJAX comes in. The present article builds upon the power of AJAX to perform server side validations through the use of javascript without relying on postbacks.
Background

As mentioned before, the primary idea behind presenting this article is to show how to perform server side validations even when complex scenarios arise, while avoiding post backs. The below control can be used as a centralized validation component, which can perform all validations for an ASP.NET web site.
Ajax Examples

Before getting into the details of how the validation works, we shall demonstrate how to make a simple AJAX call. For more information on Ajax please see An Introduction to AJAX Techniques and Frameworks for ASP.NET.

In our examples, we will be using Ajax.NET component, developed by Michael Schwartz. We chose this component because it is very easy to implement and offers a great amount of flexibility.

The following settings need to be applied to the web.config in order to use Ajax.NET component successfully. For a detailed explanation of these settings please see Michael Schwartz's web site Ajax.NET.

xml code
<configSections>
<sectionGroup name="ajaxNet">
<!-- If you are using Microsoft .NET 1.1 please remove the two attributes
<!-- requirePermission and restartOnExternalChanges, they
<!-- are only supported with .NET 2.0.-->
<section name="ajaxSettings"
type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2"
requirePermission="false" restartOnExternalChanges="true"/>
</sectionGroup>
</configSections>

<ajaxNet>
<ajaxSettings>
<urlNamespaceMappings useAssemblyQualifiedName="false">
</urlNamespaceMappings>
<jsonConverters></jsonConverters>
<debug enabled="false" />
<token enabled="false" sitePassword="password" />
<oldStyle>
<includeMsPrototype/>
</oldStyle>
</ajaxSettings>
</ajaxNet>

<location path="ajaxpro">
<system.web>
<httpHandlers>
<add verb="*" path="*.ashx"
type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
</system.web>
</location>


Making a simple ajax call

Create a simple web page with a html text box and a button control. Notice that the onclick event of the button calls the javascript function makeAjaxCall() which invokes Ajaxsample.AjaxTest ajax method in code behind.

html code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax.NET Sample</title>
<script>
function makeAjaxCall()
{
var retVal = AjaxSample.AjaxTest(document.form1.txtTest.value)
alert(retVal.value)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!--Client Side text -->
Enter value:<input type="text" id="txtTest"/>
<!--Client Side button -->
<input type="button" id="btnTest" value="Test Ajax"
onclick="makeAjaxCall()" />
</form>
</body>
</html>

The code behind class should be marked with <AjaxPro.AjaxNamespace("AjaxSample")> and the ajax web method to be invoked should be marked with <AjaxPro.AjaxMethod()>. Also the page load event should register the namespace AjaxSample using AjaxPro.Utility.RegisterTypeForAjax(GetType(AjaxSample), Page). Below is the snippet of code showing the code behind.

vbnet code
<AjaxPro.AjaxNamespace("AjaxSample")> Partial Public Class AjaxSample
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
AjaxPro.Utility.RegisterTypeForAjax(GetType(AjaxSample), Page)
End Sub

<AjaxPro.AjaxMethod()>
Public Function AjaxTest(ByVal testParam As String) As String
Return "You sent '" & testParam & "' as the testParam."
End Function
End Class

Below is the output for the sample page created:
Code:
Simple Ajax output


Building the Validation control

We create a web user control so that the same control can be reused across all the web pages in the application. The validations that will be supported by this control are defined inside a Enum ValidationType. This can be extended to support additional validations that are not covered.

vbnet code
Public Enum ValidationType
RequiredField = 1
DateRangeValidation = 4
SingleDateValidation = 2
CreditCardNumberValidation = 3
DropdownlistValidation = 5
DropdownlistRangeValidation = 11
EmailValidation = 7
PostalCodeValidation = 8
URLValidation = 9
TimeSlotRangeValidation = 10
Numeric = 12
HoursValidation = 13
MinutesValidation = 14
CompareValidation = 15
TimeSlotValidation = 16
End Enum


Mark the controls class with <AjaxPro.AjaxNamespace("AjaxValidator")>, methods with <AjaxPro.AjaxMethod()> and finally register the namespace in the page load event with AjaxPro.Utility.RegisterTypeForAjax(GetType(Validator), Page) where Validator is the class name of the user control. This is similar to what we did in there earlier sample.

Create a structure RegisteredControlsDs and a private member of list class to contain the list of the web controls of type RegisteredControlDs to be validated.
vbnet code
Private Structure RegisteredControlsDs
Public control1 As UI.Control
Public control1Desc As String
Public control2 As UI.Control
Public control2Desc As String
Public type As ValidationType
Public isRequired As Boolean

Public Sub New(ByVal control1 As UI.Control,
ByVal control1Desc As String,
ByVal control2 As UI.Control,
ByVal control2Desc As String,
ByVal type As ValidationType,
ByVal isRequired As Boolean)
Me.control1 = control1
Me.control1Desc = control1Desc
Me.control2 = control2
Me.control2Desc = control2Desc
Me.type = type
Me.isRequired = isRequired
End Sub

Public Sub New(ByVal control1 As UI.Control,
ByVal control1Desc As String,
ByVal type As ValidationType,
ByVal isRequired As Boolean)
Me.control1 = control1
Me.control1Desc = control1Desc
Me.control2 = control1
Me.control2Desc = control1Desc
Me.type = type
Me.isRequired = isRequired
End Sub
End Structure

Private _registeredControlsList As New List(Of
RegisteredControlsDs)


The controls to be validated should be added to _registeredControlsList list. Depending on whether validation is on a single control or between two controls, one of the below two methods are used to register the controls respectively. For example, If its comparison between two controls, then we use the second method. If its a single control that needs to be validated for say Date, then we use the first method for registering the control.

vbnet code
//Method 1
Public Sub RegisterControl(ByVal control As UI.Control, _
ByVal controlDesc As String, _
ByVal type As ValidationType, _
ByVal isRequired As Boolean)
_registeredControlsList _
.Add(New RegisteredControlsDs(control, controlDesc, type, isRequired))
End Sub

//Method 2
Public Sub RegisterControls(ByVal control1 As UI.Control, _
ByVal control1Desc As String, _
ByVal control2 As UI.Control, _
ByVal control2Desc As String, _
ByVal type As ValidationType, _
ByVal isRequired As Boolean)
_registeredControlsList_
.Add(New RegisteredControlsDs(control1, control1Desc,_
control2, control2Desc, type, isRequired))
End Sub


Once the controls are registered using the above methods, the next step is to create a ValidateControls method to validate the controls. Based on whether it is a single control validation or validation between two controls, ValidateControls calls one of the ValidateControl methods which is overloaded. These methods return a ValidationResult datastructure.

vbnet code
''' <summary>
''' This is the Ajax Method which is used to validate a set of UI
''' Controls.
''' </summary>
<AjaxPro.AjaxMethod()>
Public Function ValidateControls(ByVal ds As DataSet) As ValidationResult
Dim retVal As New ValidationResult(True)
Try
Dim dt As DataTable = ds.Tables(0)
Dim firstBadControl As String = String.Empty
For Each dr As DataRow In dt.Rows
Dim val1Name As String = dr("Control1Name")
.ToString()
Dim val1 As String = dr("Control1Value").ToString()
Dim val1Desc As String = dr("Control1Description")
.ToString()
Dim val2Name As String = dr("Control2Name")
.ToString()
Dim val2 As String = dr("Control2Value").ToString()
Dim val2Desc As String = dr("Control2Description")
.ToString()
Dim isreq As Boolean = Boolean.Parse(dr(
"IsRequired").ToString)
Dim type As ValidationType = CType(dr(
"ValidationType"), ValidationType)
Dim validationResult As ValidationResult
If val1Name = val2Name Then
validationResult = ValidateControl(val1Name,
val1Desc, val1, isreq, type)
Else
validationResult = ValidateControl(val1Name,
val1Desc, val1, val2Name,
val2Desc, val2, isreq, type)
End If
If Not validationResult.Status Then
retVal.Message &= validationResult
.Message & Environment.NewLine
retVal.Status = False
If firstBadControl = String.Empty Then
firstBadControl = val1Name
End If
Next
retVal.InvalidControlName = firstBadControl
Catch ex As Exception
retVal.Message = "Ajax Exception:" & ex.ToString()
retVal.Status = False
End Try
Return retVal
End Function

Finally, RegisterScript method builds the javascript dynamically based on the registered controls on the server side.

vbnet code
''' <summary>
''' Registers the Validation Script.
''' Javascript is generated based on which controls have been registered,
''' along with the Ajax call.
''' </summary>
Public Sub RegisterScript()
Dim scriptCode As String = _
"<script language="'javascript'" type='text/javascript'>" & _
"function _validatePage()" & _
"{" & _
" try {" & _
"var ds = new Ajax.Web.DataSet();" & _
"var dt = new Ajax.Web.DataTable();" & _
"dt.addColumn('Control1Name', 'System.String');" & _
"dt.addColumn('Control1Value', 'System.String');" & _
"dt.addColumn('Control1Description', 'System.String');" & _
"dt.addColumn('Control2Name', 'System.String');" & _
"dt.addColumn('Control2Value', 'System.String');" & _
"dt.addColumn('Control2Description', 'System.String');" & _
"dt.addColumn('IsRequired', 'System.Boolean');" & _
"dt.addColumn('ValidationType', 'System.Int32');" & _
"ds.addTable(dt);" & _
"<DELTA>" & _
"var res = AjaxValidator.ValidateControls(ds);" & _
"if (res.value.Status == false) " & _
" {alert(res.value.Message);" & _
"document.getElementById(res.value.InvalidControlName).focus();" & _
"return false;" & _
"} else return true;" & _
"} catch(ex) {alert('Validation Exception:' + ex.description); " &_
"return false; }" & _
"}" & _
"</script>"

Dim nl As String = Environment.NewLine
Dim deltaCode As String = nl & "var <r> = {};" & nl & _
"<r>.Control1Name = '<hidControlValue1>';" & nl & _
"<r>.Control1Value = document.getElementById('<hidControlValue1>')." &_
"value;" & nl & _
"<r>.Control1Description = '<hidControlDesc1>';" & nl & _
"<r>.Control2Name = '<hidControlValue2>';" & nl & _
"<r>.Control2Value = document.getElementById('<hidControlValue2>')." &_
"value;" & nl & _
"<r>.Control2Description = '<hidControlDesc2>';" & nl & _
"<r>.IsRequired = <isRequired>;" & nl & _
"<r>.ValidationType = <type>;" & nl & _
"dt.addRow(<r>);" & nl
deltaCode = JsTryCatchIt(deltaCode, _
"Unable to find control <r>:<hidControlDesc1>")


Dim codeBuilder As New StringBuilder
For i As Integer = 0 To _registeredControlsList.Count - 1
Dim snippet As String = deltaCode
With _registeredControlsList(i)
snippet = snippet.Replace("<r>", "r" & i)
snippet = snippet.Replace("<hidControlDesc1>", .control1Desc)
snippet = snippet.Replace("<hidControlDesc2>", .control2Desc)
snippet = snippet.Replace("<isRequired>", _
.isRequired.ToString.ToLower)
snippet = snippet.Replace("<type>", _
CType(.type, Integer).ToString())
snippet = snippet.Replace("<hidControlValue1>", _
GetClientId(.control1))
snippet = snippet.Replace("<hidControlValue2>", _
GetClientId(.control2))
End With
codeBuilder.Append(snippet)
Next
scriptCode = scriptCode.Replace("<DELTA>", codeBuilder.ToString)
Page.ClientScript.RegisterStartupScript(Me.GetType, "validatorScript", _
scriptCode)
AppendToAttribute(_triggerControl, "onclick", _
"if(!_validatePage()) return false;")
End Sub

With this, the creation of validation user control is done. Below section describes how to use the validation control in our application pages, which is very easy.
Putting it all together: Using the Validation user control in a web page

Create a web form AjaxValidationSample.aspx and drag the validation user control into it. Add as many controls as needed for validation. In the page load event of the form call the RegisterValidationControls() method. Inside RegisterValidationControls() (or a method of your choosing) you need to provide a Trigger Control which will trigger the validation. After that call RegisterControl or RegisterControls methods in order to register the control(s) you want. At the end call the RegisterScript method to render the Ajax JavaScript.

The following code shows the contents of AjaxValidationSample.aspx and it's code behind:

html code
<%@ Page Language="vb" AutoEventWireup="false" 
CodeBehind="AjaxValidationSample.aspx.vb"
Inherits="AjaxValidation.AjaxValidationSample" %>
<%@ Register Src="Validator.ascx" TagName="Validator" TagPrefix="uc1" %>

<!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>Ajax Validation Sample</title>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td colspan="2">
<uc1:Validator ID="Validator1" runat="server" />
</td>
</tr>
<tr>
<td>Email Address:</td>
<td><asp:TextBox ID="txtEmail" runat="server"
ToolTip="Email Address"></asp:TextBox></td>
</tr>
<tr>
<td>Date Range:</td>
<td><asp:TextBox ID="txtFrom" runat="server"
ToolTip="From Date"/><asp:TextBox ID="txtTo"
runat="server" ToolTip="To Date"/></td>
</tr>
</table>
<asp:Button ID="btnSubmit" Text="Sumbit" runat="server"/>
</form>
</body>
</html>


Code Behind:
vbnet code
Public Partial Class AjaxValidationSample
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object,_
ByVal e As System.EventArgs) Handles Me.Load
RegisterValidationControls()
End Sub

Private Sub RegisterValidationControls()
Validator1.TriggerControl = btnSubmit
Validator1.RegisterControl(txtEmail, ValidationType.EmailValidation, _
True)
Validator1.RegisterControls(txtFrom, txtTo, _
ValidationType.DateRangeValidation, True)
Validator1.RegisterScript()
End Sub
End Class

That's it. At runtime, when the form loads, the javascript is loaded and the validations are applied. Below is the screen shot of the output once the submit button is clicked.
Attachment:
File comment: Screenshot
fig2.jpg
fig2.jpg [ 36.64 KiB | Viewed 5716 times ]

Simple Ajax output
Scope

The presented validation control is designed to handle single control validation and validation between two controls in batch mode. This means that you can validate 10 controls with one Ajax call.
Conclusion

We have seen how to create an extensible AJAX based validation user control. It is very easy to keep adding more types of validations to this control. All that one needs to do is define a new enum and provide the validation code and the validation control will do the rest. Hope this will be useful to someone.

Other related Examples :
ajax/ajax-form-validation-t5685.html
ajax/sending-a-post-request-using-ajax-t598.html
ajax/my-first-ajax-application-t597.html




Attachments:
ajaxValidation_src.zip [82.96 KiB]
Downloaded 1022 times

_________________
Please recommend my post if you found it helpful. ,
java,j2ee,ccna ,ccnp certified .
Author:
Expert
User avatar Posts: 838
Have thanks: 2 time

hi
thanks for this gr8 article.
i have problem while using ur code in content pages of master page.
it is not find control which passed in "RegisterControl" method.
i think its because the id of control placed in master pages changed.
how i pass control????
please help


Author:
Newbie
User avatar Posts: 1
Have thanks: 0 time
Post new topic Reply to topic  [ 2 posts ] 

  Related Posts  to : Validation using Ajax
 AJAX form validation     -  
 What is AJAX, How to start AJAX?     -  
 DNS Validation     -  
 XML validation against DTD     -  
 date validation in asp     -  
 US Zip Code Validation     -  
 validation using JavaScript     -  
 What will be validation for Zip code ?     -  
 validation on number     -  
 Form Validation Problem     -  



Topic Tags

AJAX Validation
cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com