Solved

Twitter Bootstrap 3 jQuery Validate format issue

Posted on 2013-11-21
6
482 Views
Last Modified: 2013-12-02
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 ?

Fiddle
0
Comment
Question by:maddisoncr
  • 3
  • 3
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
A fiddle does not help with diagnostics. we need a link to the live page.

Cd&
0
 

Author Comment

by:maddisoncr
Comment Utility
Hi

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

http://cloud-contractor.co.uk/ClientShow1.php
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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.

Cd&
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:maddisoncr
Comment Utility
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
0
 

Author Comment

by:maddisoncr
Comment Utility
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
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.

Cd&
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now