如何在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来显示所有验证器的合并验证消息.

<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>