c# - 如何在 Bootstrap 中使用 RequiredFieldValidator 和 ValidationSummary

Question

我是 ASP.Net 的新手，有一个关于 ValidationSummary 或 Validator 的简单问题。问题是，即使没有验证错误，我的警报 div 仍然显示。 ASP.Net 生成用于客户端验证的代码，那么我如何才能仅在发生错误时显示警报 div，这甚至可能吗？我认为 ValidationSummary 在这种情况下可能会有所帮助，但我不确定，希望有人能帮助我。

当前页面:

<asp:Login ID="LoginForm" runat="server" ViewStateMode="Disabled" RenderOuterTable="False" OnAuthenticate="LoginForm_Authenticate">
    <LayoutTemplate>
            <div class="alert alert-danger" role="alert">
                <p><asp:RequiredFieldValidator ID="RequiredFieldValidatorUserName" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="UserName" Display="Dynamic"></asp:RequiredFieldValidator></p>
                <p><asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="Password" Display="Dynamic"></asp:RequiredFieldValidator></p>
            </div>
            <div class="form-group">
                <asp:TextBox runat="server" CssClass="form-control" ID="UserName" />
                <asp:TextBox runat="server" CssClass="form-control" ID="Password" TextMode="Password"/>
            </div>
            <asp:Button runat="server" ID="Login" CommandName="Login" CssClass="btn btn-default btn-primary" Text="Login" />
    </LayoutTemplate>
</asp:Login>

Answer 1

RequiredFieldValidator 应位于每个 TextBox 的下方或上方，并带有 SetFocusOnError="True"

如果需要，您可以使用 ValidationSummary 和 alert alert-danger 样式来显示所有验证器的合并验证消息。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
    .panel-login {
        margin: 10px auto;
        max-width: 400px;
    }

    .alert-text {
        color: #a94442;
    }
</style>
<div class="panel panel-default panel-login">
    <div class="panel-heading">
        <div class="panel-title">Login</div>
    </div>
    <div class="panel-body form-horizontal">
        <asp:ValidationSummary runat="server" ID="ValidationSummary1" 
            DisplayMode="BulletList"
            ShowMessageBox="False" ShowSummary="True" CssClass="alert alert-danger" />
        <div class="form-group">
            <label class="control-label col-sm-4">
                Useranme
            </label>
            <div class="col-sm-8">
                <asp:TextBox runat="server" CssClass="form-control" ID="UserName" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidatorUserName" 
                    runat="server"
                    ErrorMessage="Please enter username." ControlToValidate="UserName"
                    Display="Dynamic" SetFocusOnError="True" CssClass="alert-text" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4">
                Password
            </label>
            <div class="col-sm-8">
                <asp:TextBox runat="server" CssClass="form-control" ID="Password" 
                    TextMode="Password" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" 
                    runat="server"
                    ErrorMessage="Please enter password." ControlToValidate="Password"
                    Display="Dynamic" SetFocusOnError="True" CssClass="alert-text" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <asp:Button runat="server" ID="Login" CommandName="Login"
                    CssClass="btn btn-default btn-primary" Text="Login" />
            </div>
        </div>
    </div>
</div>