Arikkan
asked on
1. Display problem with using multiple Validators in Bootstrap for .Net
I am using Bootstrap in my .Net page and have an email field where I have the following validators:
1. Email required validator
2. Email format validator
But somehow the validation messages do not show up in the same place.
There is a blank space before the second validation message.
Its like the validator is adding a blank space.
But this does not happen with .Net code without bootstrap, where the first validation message available is shown in the first available space.
-------------------------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- --
Any ideas on how to fix this in Bootstrap?
-------------------------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- --
<div class="row">
<div class="col label col-xs-12 col-sm-3 col-md-3 col-lg-3 textLabelAlign">
<asp:Label ID="lblEmail" runat="server" Text="Email "/>
<asp:Label ID="lblEmailRequired" runat="server" Text="*" rel="required" />
</div>
<div class="col field col-xs-12 col-sm-6 col-md-6 col-lg-6 textBoxAlign">
<telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="txtEmail" Width="100%" EmptyMessage="Enter Email" TabIndex="14" MaxLength="128" Font-Size="Medium" />
</div>
<div class="col field col-xs-0 col-sm-3 col-md-3 col-lg-3">
<asp:RequiredFieldValidato r ID="rfvEmail" runat="server" ControlToValidate="txtEmai l" ErrorMessage="Email is required" rel="error" SetFocusOnError="true" ValidationGroup="vgSubmitR equest" />
<asp:RegularExpressionVali dator ID="validateEmail" runat="server" ControlToValidate="txtEmai l" Text=" " ValidationGroup="vgSubmitR equest" ErrorMessage="Enter valid email address" rel="error" SetFocusOnError="true"
ValidationExpression="\w+( [-+.']\w+) *@\w+([-.] \w+)*\.\w+ ([-.]\w+)* " Enabled="true" />
</div>
</div>
-------------------------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- --
1. Email required validator
2. Email format validator
But somehow the validation messages do not show up in the same place.
There is a blank space before the second validation message.
Its like the validator is adding a blank space.
But this does not happen with .Net code without bootstrap, where the first validation message available is shown in the first available space.
--------------------------
Any ideas on how to fix this in Bootstrap?
--------------------------
<div class="row">
<div class="col label col-xs-12 col-sm-3 col-md-3 col-lg-3 textLabelAlign">
<asp:Label ID="lblEmail" runat="server" Text="Email "/>
<asp:Label ID="lblEmailRequired" runat="server" Text="*" rel="required" />
</div>
<div class="col field col-xs-12 col-sm-6 col-md-6 col-lg-6 textBoxAlign">
<telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="txtEmail" Width="100%" EmptyMessage="Enter Email" TabIndex="14" MaxLength="128" Font-Size="Medium" />
</div>
<div class="col field col-xs-0 col-sm-3 col-md-3 col-lg-3">
<asp:RequiredFieldValidato
<asp:RegularExpressionVali
ValidationExpression="\w+(
</div>
</div>
--------------------------
First thing is first. You're using a class col-xs-0, which doesn't exist. If you do not want it visible for xs you should use the class hidden-xs
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for pointing it out. But I was looking to fix the Validation message and the issue was happening for every resolution.
ASKER
I solved the validator multiple display issue.....