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

Question

I use Twitter Bootstrap 2.1.0 on my website, I also use the jQuery Validation Engine 2.6.2 plugin that works well together.

Until you try to use the check mechanism in modal mode:

Notice how we get the horizontal scrollbar and the message is cropped?

I am wondering what can I do to fix this?

Answer 1

You can set the default position for error messages when creating / updating validationEngine, which will apply to all of your checked fields:

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

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

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

Answer 2

Find below code in jquery.validationEngine.js

  if (options.isOverflown) field.before(prompt); else $("body").append(prompt); 

replace it with

  //if (options.isOverflown) field.before(prompt); //else //$("body").append(prompt); 

Answer 3

 <script type="text/javascript"> $(function () { $("#form1").validationEngine('attach', { promptPosition: "topLeft" }); }); function RValidate() { $("#form1").validationEngine('detach'); } </script>