استفاده از Jquery Validation در update Panel
دوشنبه 9 تیر 1393استفاده از Jquery Validation در update Panel - Asp.Net در این مقاله قصد داریم از Jquery Validator در update Panel استفاده کنیم
سلام دوستان
در مرحله اول یک ScriptManager و یک UpdatePanel در صفحه قرار میدیم و دو TextBox و یک Button قرار میدیم
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2">
<a href="http://www.barnamenevisan.org/">www.Barnamenevisan.org</a>
</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 ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img alt="" src="loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
سپس با کتابخانه های javascript مورد نیاز را اضافه میکنیم
<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>

نمونه هم ضمیمه کردم
موفق و پیروز باشید
- ASP.net
- 2k بازدید
- 4 تشکر