Twitter Bootstrap 3 jQuery Validate format issue

I am using twitter bootstrap 3 and jQuery Validate..

Everything works well until i try to position an error for an item that has a bootstrap span icon.

As you can see, when the item has an icon, the item goes left. I imagine this is a conflict between the help-block span and the icon span ?

Who is Participating?
COBOLdinosaurConnect With a Mentor Commented:
The problem is not that it is a span.  It is always going to left justify because the broken structure of the form has its parent with "form-group" and "has-error" as the class, which has its left margin all the way to the left.  The error message should actually have a parent with class "col-lg-10" and "input group".

I am not an Expert in bootstrap architecture, but basically it looks like  there are contraints that you are going to have to code around to override a pretty obtuse structure that does not bind the error message to the input.

A fiddle does not help with diagnostics. we need a link to the live page.

maddisoncrAuthor Commented:

I've put a test page up. There are a few errors scattered around as you can see but the main issue i am having at the moment is with the controls that have the icons inside.. I.e. Email, Web etc..

When you validate client name, the text is position beneath the textbox.. with the icon boxes it gets thrown to the left.

The next issue is with the icons themselves.. For some reason on my form,  the icon doesn't line up properly with the text box.

I am also having responsive issues with the text boxes but haven't had chance to look into that yet. for example. the icon text boxes halve in size when the screen is resized

hope that helps
Train for your Pen Testing Engineer Certification

Enroll today in this bundle of courses to gain experience in the logistics of pen testing, Linux fundamentals, vulnerability assessments, detecting live systems, and more! This series, valued at $3,000, is free for Premium members, Team Accounts, and Qualified Experts.

You are injecting a span styled as a block into the display.  Either you want a real span in which case you should not be making is a block element, or if you actually want a block you should be using a div.

Looking at the code, I have no idea what you expect that to do because it is doing exactly what is coded to do.

As for the behavior on a re-size, the inputs without icons are set to a fixed width of 931, and the ones with icons are overriding it from script generated code.  Probably the same generated code as what is screwing up the validation display.

It appears that media queries are either not being used or are incorrect.  

There are just too many thing going on at the same time.  

I think you need to pull back and try one thing at a time. get the pieces working, and then put them together.

maddisoncrAuthor Commented:
you're right.. i do need to break the bits down..

in relation to where the errors are being placed.. i've chopped around with the form

from what i understand.. the error message is placed after the '<div class="col-lg-10">'. this works fine as can be seen with the client name..

but it doesn't work wheen the input-group class is added.. looking at the bootstrap 3 css, the input-group class is relative.. so i'm guessing that's why the error message doesn't sit where i want it because it's not a block ?

can i work around this ?

thanks for your help

i've updated the form, to show fewer items
maddisoncrAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.