asp.net更新面板中的Jquery验证引擎
我有一个Asp.net webforms站点，我正在使用jquery验证引擎(source)来验证我的控件。我也在使用bootstrap来设计我的控件。
它工作得很好，但是我的引导选择框给我带来了一些麻烦。当放置在updatepanel中时，bootstrap选择框将在部分回发期间丢失其样式。因此，我不得不通过添加以下脚本重新绑定select样式：
function pageLoad() {
$('.select').unbind();
$('.select').selectpicker();
}这保持了风格，效果很好。但是现在我注意到，当jquery validationengine放在updatepanel中时，它不再工作了。部分回发也会去掉这一点吗？奇怪的是，我在同一个页面上有其他的updatepanel，如果其他字段中有一个不是有效的，然后我选择了bootstrap选择框，它会保持它的验证样式。我猜是因为另一个面板中的第一个错误限制了这个控件回发并丢失样式？
这是我的代码。底部的updatepanel是包含有问题的选择框的面板。
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<label class="col-md-4 col-xs-5 control-label">First Name</label>
<div class="col-md-8 col-xs-7">
<asp:RequiredFieldValidator ID="txtFirstNameRequiredFieldValidator" runat="server"
ControlToValidate="txtFirstName"
Text="This field is required"
Display="None"
CssClass="label label-danger label-form"
ValidationGroup="MainValidationGroup" />
<asp:RegularExpressionValidator ID="txtFirstNameRegExp" runat="server"
ControlToValidate="txtFirstName"
Text="Maximum 50 characters"
ValidationExpression="^.{0,50}$"
Display="None"
CssClass="label label-danger label-form"
ValidationGroup="MainValidationGroup" />
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-pencil"></span></span>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control validate[required,maxSize[50]]" AutoPostBack="True" OnTextChanged="txtFirstName_TextChanged"/>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID ="txtFirstName" EventName ="TextChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<label class="col-md-4 col-xs-5 control-label">Status</label>
<div class="col-md-8 col-xs-7">
<asp:RequiredFieldValidator ID="ddlStatusRequiredFieldValidator" runat="server"
ControlToValidate="ddlStatus"
Text="This field is required"
Display="None"
CssClass="label label-danger label-form"
ValidationGroup="MainValidationGroup" />
<asp:DropDownList ID="ddlStatus" runat="server" CSSClass="form-control select show-tick validate[required]" AutoPostBack="True" onselectedindexchanged="ddlStatus_SelectedIndexChanged" OnChange="$(this).validationEngine('validate');"/>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID ="ddlStatus" EventName ="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>为了确保jquery validationengine在updatepanel回发后在bootstrap select上保持活动状态，我需要更改或添加什么，就像它处理我的文本框一样？
回答 1
Stack Overflow用户
发布于 2015-04-01 04:23:24
请确保验证器通常使用以下格式的调用实例化，插件只能在表单元素上实例化：
$("#form1").validationEngine();我希望您在单击按钮时验证您的表单，该按钮将留在更新面板中。
我已经在我的机器上测试了你的代码，并且使用bootstrap和验证引擎的组合工作得很好。
在主体标记</body>完成之前添加以下脚本。请记住，"UpdatePanel1“是提交按钮所在的更新面板的id。
<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);
}
}
if (sender._postBackSettings.panelsToUpdate.join().indexOf("UpdatePanel2") != -1) {
if (!$("[id*=UpdatePanel2]").validationEngine('validate')) {
e.set_cancel(true);
}
}
});
};
</script>在这里您可以找到validating controls using jQuery validation-engine with update panel的演示和源代码。
如果你有任何问题请告诉我。
https://stackoverflow.com/questions/29377704
复制相似问题
腾讯云开发者
