In this article I will explain how to use jQuery ValidationEngine plugin with ASP.Net AJAX UpdatePanel control.
By default the jQuery ValidationEngine plugin does not stop submission even if the validation is failing and hence we will need to make use of ASP.Net UpdatePanel client side events to fix the issue.
You might also like to read:
HTML Markup
The following HTML Markup consists of an ASP.Net AJAX ScriptManager, UpdatePanel and UpdateProgress. Inside the UpdatePanel I have form with two TextBoxes and a Button.
This form will be validated using jQuery ValidationEngine plugin.
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2">
Please fill the following Form
</th>
</tr>
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" CssClass="validate[required]" Text="" />
</td>
</tr>
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]"
Text="" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button Text="Submit" runat="server" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img alt = "" src="loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
Using jQuery ValidationEngine Plugin inside ASP.Net AJAX UpdatePanel
Firstly I have inherited the JavaScript and CSS external files needed for the jQuery ValidationEngine plugin.
Using the instance of the PageRequestManager, I have added IntializeRequest client side event handler of the ASP.Net AJAX UpdatePanel.
Inside the IntializeRequest event handler, I am first checking whether the request is initiated by the UpdatePanel1 which is the UpdatePanel used by the form. Then the controls inside UpdatePanel are validated using the jQuery ValidationEngine plugin and if validation is unsuccessful then the UpdatePanel Partial PostBack is cancelled.
And if the validation is successful then it continues with the partial PostBack.
<link href="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
charset="utf-8"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
charset="utf-8"></script>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_initializeRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate.join().indexOf("UpdatePanel1") != -1) {
if (!$("[id*=UpdatePanel1]").validationEngine('validate')) {
e.set_cancel(true);
}
}
});
};
</script>
![Using jQuery ValidationEngine Plugin with ASP.Net AJAX UpdatePanel]()
Demo
Downloads
