How to fix positioning error with jQuery Validatio

Question

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 1

Search the 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 2

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" />

Answer 3

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

</script>