回发后出现页面客户端验证问题

本文关键字：客户端 验证 问题 | 更新日期: 2023-09-27 18:20:31

回发后，我在客户端验证方面遇到了一个奇怪的问题。我更改了导致"选定索引"事件激发（发生回发）的组合框项目。事件发生后，我点击了"保存"按钮。客户端验证没有被调用，而是调用服务器端btnSave_Click事件。如果我不更改ComboBox，客户端验证工作正常。在调用服务器端方法之前，我想验证客户端的页面控件。请告诉我。

    <asp:TextBox runat="server" ID="txtTitle" /> 
     <telerik:RadComboBox ID="RadComboBox1" runat="server" DataValueField="location_id"
                    DataTextField="description" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
                    AutoPostBack="true" Width="250px" >
     </telerik:RadComboBox>
<asp:Button ID="btnSave" name="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" CausesValidation="true"/>

代码背后：

protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        //some logic
    }
   protected void btnSave_Click(object sender, System.EventArgs e)
    {
         // save control values
    }

客户端脚本

<script type="JavaScript">
        $("#<%=btnSave.ClientID %>").click(function () {
            //  debugger;
            var valid = true;
            var errors = false;
            var msg;
            var msg = "<b>Please fill the Required fields:</b><br />";
            if ($("#<%= txtTitle.ClientID %>").val().length == 0) {
                msg += "Title is Required!'n";
                errors = true;
            }
            if(errors){
             alert(msg);
            }
        });
    });
</script>

回发后出现页面客户端验证问题

您的javascript验证方法没有采取任何措施来阻止回发事件的触发。

试试这个：

<script type="JavaScript">
        $("#<%=btnSave.ClientID %>").click(function (evt) {
            //  debugger;
            var valid = true;
            var errors = false;
            var msg;
            var msg = "<b>Please fill the Required fields:</b><br />";
            if ($("#<%= txtTitle.ClientID %>").val().length == 0) {
                msg += "Title is Required!'n";
                errors = true;
            }
            if(errors){
             evt.preventDefault();
             alert(msg);
             return false;
            }
        });
    });
</script>

因为表单控件位于UpdatePanel中，回发会导致附加到这些控件的事件处理程序丢失。使用jQuery的事件委派来确保即使在部分回发之后事件仍然会触发。

委派事件的优势在于，它们可以处理稍后添加到文档中的子代元素中的事件。通过选择在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序。

将事件处理程序附件更改为以下内容：

$('body').on('click', '#<%=btnSave.ClientID %>', function () {
    // rest of code
}

我使用body作为初始选择器，但您可以选择任何其他不位于UpdatePanel中的选择器。

相关文章：