1. Display problem with using multiple Validators in Bootstrap for .Net

Arikkan
Arikkan used Ask the Experts™
on
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>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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
Commented:
I found the issue. I added the property  

display = "dynamic"

and it started working

Author

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

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial