asp.net Updatepanel 中的 Jquery 验证引擎

Question

我有一个 Asp.net webforms 站点，我正在使用 jquery 验证引擎 (source) 来验证我的控件。我还使用引导程序来设置我的控件样式。

它工作正常，但是我的引导选择框给我带来了一些麻烦。当放置在更新面板中时，引导选择框会在部分回发期间失去其样式。所以我不得不通过添加这个脚本来重新绑定选择样式：

function pageLoad() {
            $('.select').unbind();
            $('.select').selectpicker();
        }

这保持了风格并且效果很好。但是现在我注意到 jquery 验证引擎在放置在更新面板中时不再工作。部分回发是否也将其剥离？奇怪的是我在同一页面上有其他更新面板，如果其他字段之一首先无效，然后我选择引导选择框，它会保持它的验证样式。我猜是因为另一个面板中的第一个错误是限制此控件回发并丢失样式？

这是我的代码。底部更新面板是包含相关选择框的面板。

<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 验证引擎在 updatepanel 回发后在引导选择上保持活动状态，就像我的文本框一样？

Answer 1

请确保验证器通常通过以下格式的调用实例化，插件只能在表单元素上实例化：

$("#form1").validationEngine();

我希望您在单击按钮时验证您的表单，并且该按钮保留在更新面板中。

我已经在我的机器上测试了你的代码，并且结合了引导程序和验证引擎，效果很好。

在完成主体标签</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的demo和源代码。

如果您有任何问题，请告诉我。