onChange 事件后未显示 asp.net ValidationSummary

Question

我有一个简单的 WebForms，其中包含几个 <asp:Validators> 和一个 <asp:ValidationSummary>...

提交表单时，一切正常，无效文本框旁边显示“*”，ValidationSummary 显示错误消息。

当您通过按 Enter 或单击而失去对其中一个文本框的关注时，就会出现问题。 （onChange 事件）。 如果无效，验证器中的“*”会显示，但 ValidationSummary 不会。

仅在提交期间显示 ValidationSummary 是正常行为吗？

看起来这是设计使然，因为显示摘要的 js 函数 (ValidationSummaryOnSubmit) 仅在提交函数“Page_ClientValidate”中调用 但这都是生成的js所以....

<div class="wrapper">
    <h2>
        <asp:Label ID="MainStatus" runat="server" CssClass="successNotification"></asp:Label>
    </h2>
    <form id="form1" runat="server">
    <asp:ValidationSummary ID="LoginUserValidationSummary" runat="server" CssClass="failureNotification"
        ValidationGroup="LoginUserValidationGroup" />
    <asp:Label ID="StatusError" runat="server" CssClass="failureNotification"></asp:Label>
    <!-- <asp:Panel ID="pnlMyForm" runat="server" DefaultButton="LoginButton"> -->
        <fieldset class="login" runat="server" id="FormFieldset">
            <legend>Account Information</legend>
            <p>
                <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
                <asp:TextBox ID="UserName" runat="server" CssClass="textEntry"></asp:TextBox>
                <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
                    CssClass="failureNotification" Display="Dynamic" ErrorMessage="User Name is required." ToolTip="User Name is required."
                    ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
            </p>
            <p id="CurrentPwd" runat="server">
                <asp:Label ID="CurrentPasswordLabel" runat="server" AssociatedControlID="CurrentPassword">Current Password:</asp:Label>
                <asp:TextBox ID="CurrentPassword" runat="server" CssClass="passwordEntry" TextMode="Password"></asp:TextBox>
                <asp:RequiredFieldValidator ID="ConfirmPasswordValid" runat="server" ControlToValidate="CurrentPassword"
                    CssClass="failureNotification" Display="Dynamic" ErrorMessage="Current Password is required." ToolTip="Current password is required."
                    ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
                <asp:CompareValidator ID="ConfirmPasswordComp" runat="server" ControlToCompare="Password"
                    ControlToValidate="CurrentPassword" CssClass="failureNotification" Display="Dynamic"
                    Operator="NotEqual" ErrorMessage="The current password and new password must be different."
                    ValidationGroup="LoginUserValidationGroup">*</asp:CompareValidator>
            </p>
            <p id="Pwd" runat="server">
                <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" Height="21px">New Password:</asp:Label>
                <asp:TextBox ID="Password" runat="server" CssClass="passwordEntry" TextMode="Password"></asp:TextBox>
                <asp:RequiredFieldValidator Display="Dynamic" ID="PasswordRequired" runat="server" ControlToValidate="Password"
                    CssClass="failureNotification" ErrorMessage="New Password is required." ToolTip="New Password is required."
                    ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
            </p>
            <p id="ConfirmPwd" runat="server">
                <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Confirm Password:</asp:Label>
                <asp:TextBox ID="ConfirmPassword" runat="server" CssClass="passwordEntry" TextMode="Password"></asp:TextBox>
                <asp:RequiredFieldValidator ControlToValidate="ConfirmPassword" CssClass="failureNotification"
                    Display="Dynamic" ErrorMessage="Confirmation Password is required." ID="ConfirmPasswordRequired"
                    runat="server" ToolTip="Confirmation Password is required." ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
                <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password"
                    ControlToValidate="ConfirmPassword" CssClass="failureNotification" Display="Dynamic"
                    ErrorMessage="The password was not correctly confirmed. Please ensure that the new password and confirmed password match exactly."
                    ValidationGroup="LoginUserValidationGroup">&nbsp</asp:CompareValidator>
            </p>
        </fieldset>
        <p class="right">
            <input id="ResetButton" runat="server" type="reset" value="Clear fields" />
            <asp:Button ID="LoginButton" runat="server" Text="Update Password" OnClick="Button_Update_Pwd"
                ValidationGroup="LoginUserValidationGroup" />
            <asp:Button ID="UsrButton" runat="server" Text="Next" OnClick="Button_Check_User"
                ValidationGroup="LoginUserValidationGroup" />
        </p>
        <!-- </asp:Panel> -->
    </form>
</div>

Answer 1

这是我的解决方法：

每次表单字段获得焦点时，将最后一个获得焦点的表单字段与滚动条位置一起存储，例如：

<input id="Text1" type="text" onfocus="SetPageActiveElement(this);" />

<select id="Select1" onfocus="SetPageActiveElement(this);">
    <option>option 1</option>
</select>  

使用 on blur 事件（onchange for selects）调用 Page_ClientValidate() 并强制验证摘要刷新其内容。为了以防万一，还要清除最后一个焦点元素的模糊。所以你最终会得到类似的东西：

<input id="Text1" type="text" onfocus="SetPageActiveElement(this);" onblur="ClearValidationSummary();" />

<select id="Select1" onfocus="SetPageActiveElement(this);" onchange="ClearValidationSummary();">
    <option>option 1</option>
</select>

这些是我的 js 函数：

var activeElement;

// This function saves the last element which got focus and saves it on a variable to use it later
// Same thing applies for vertical and horizontal scroll position
function SetPageActiveElement(element) {
    activeElement = element; 
}

function ClearValidationSummary() {
    var vscroll = (document.all ? document.scrollTop : window.pageYOffset);
    var hscroll = (document.all ? document.scrollLeft : window.pageXOffset);
    // Forces page validation to refresh validation summaries
    Page_ClientValidate();

    if (activeElement != null) {
        // Returns the last vertical and horizontal scroll bar position 
        window.scrollTo(hscroll, vscroll);

        SetPageActiveElement(null);
    }
}

希望它对某人有所帮助。

Answer 2

  Is showing the ValidationSummary ONLY during a submit a normal behavior ?

是的。这就是验证摘要的工作方式。您可以在需要时自己调用 Page_ClientValidate 函数。但是，它将评估整个页面，包括您尚未填写的任何字段，这些字段也具有必填字段验证器，因此请确保这是您想要做的。