Link to home
Start Free TrialLog in
Avatar of Arikkan
ArikkanFlag for United States of America

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:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail" ErrorMessage="Email is required" rel="error" SetFocusOnError="true" ValidationGroup="vgSubmitRequest" />
                        <asp:RegularExpressionValidator ID="validateEmail" runat="server" ControlToValidate="txtEmail" Text=" " ValidationGroup="vgSubmitRequest" ErrorMessage="Enter valid email address" rel="error" SetFocusOnError="true"
                                                        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Enabled="true" />

                    </div>
                </div>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Avatar of Rob
Rob
Flag of Australia image

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
Avatar of Arikkan
Arikkan
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Arikkan

ASKER

Thanks for pointing it out. But I was looking to fix the Validation message and the issue was happening for every resolution.
Avatar of Arikkan

ASKER

I solved the validator multiple display issue.....