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 样式显示所有验证程序的合并验证消息。

enter image description here

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

Answer 2

这是一个救生员！但如果使用CssClass="alert-text" bootstrap将无法识别它。在所需的验证器中使用CssClass="text-danger"。但至于其余部分，就像魅力一样！

Answer 3

创建<asp:ValidationSummary ID="Valid" runat="server" ValidationGroup="1" CssClass="validationsColor" DisplayMode="BulletList" />

然后设置<asp:RequiredFieldValidator ID="RequiredFieldValidatorUserName" runat="server" ErrorMessage="RequiredFieldValidator" ValidationGroup="1" ControlToValidate="UserName" Display="Dynamic"></asp:RequiredFieldValidator>

试试看，然后看看。

如何在Bootstrap中使用RequiredFieldValidator和ValidationSummary

3 个答案: