How to use RequiredFieldValidator and ValidationSummary with Bootstrap
I'm new to ASP.Net and have a simple question about ValidationSummary or Validator in general. The problem is, even if there are no validation errors, my div div is still showing. ASP.Net generates client validation code as I am going to display the warning div only when an error occurs, is this possible? I thought ValidationSummary could help in this situation, but I'm not sure, hopefully 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>
source to share
RequiredFieldValidator must be below or above each TextBox with SetFocusOnError = "True"
If you want, you can use ValidationSummary with the alert alert-danger style to display consolidated confirmations 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>
source to share
to create <asp:ValidationSummary ID="Valid" runat="server" ValidationGroup="1" CssClass="validationsColor" DisplayMode="BulletList" />
then install <asp:RequiredFieldValidator ID="RequiredFieldValidatorUserName" runat="server" ErrorMessage="RequiredFieldValidator" ValidationGroup="1" ControlToValidate="UserName" Display="Dynamic"></asp:RequiredFieldValidator>
Try this and see.
source to share