How to fix positioning error with jQuery Validation Engine and Twitter Bootstrap modals

Hailwood picture Hailwood · Jan 28, 2013 · Viewed 13k times · Source

I am using Twitter Bootstrap 2.1.0 on my site, I am also using the jQuery Validation Engine 2.6.2 plugin, which these work well together.

Until you try to use the validation engine in a modal:

Notice how we get a horizontal scroll bar, and the message gets cut off?

I am wondering what I can do to fix this?

Answer

qdev picture qdev · Mar 11, 2013

You can establish a default position for the error messages when you instantiate/update validationEngine, which will apply to all your validated fields:

$("#formID1").validationEngine({promptPosition : "topRight:-100"});

and/or setup individual position settings for each of your fields:

<input type="text" class="validate[required]" data-prompt-position="bottomRight:-100" />