How to use RequiredFieldValidator and ValidationSummary with Bootstrap

Question

I am new to ASP.Net and have a simple question about ValidationSummary or Validator in general. The problem is that even if there are no validation errors my alert div is still showing. ASP.Net generates code for clientside validation so how am I going to display the alert div only when an error occurs, is this even possible? I thought that ValidationSummary may help in this situation but I am not sure, hope someone can help me.

Current page:

<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 should be under or above each TextBox with SetFocusOnError="True"

If you want, you can use ValidationSummary with alert alert-danger style to show consolidate validate messages of all validators.

<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

This is a life saver! but if you use CssClass="alert-text" bootstrap will not recognize it. Use CssClass="text-danger"in the required validators. But as for the rest, works like a charm!