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

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?

Job

This is the answer https://mcmap.net/q/1076413/-how-to-fix-positioning-error-with-jquery-validation-engine-and-twitter-bootstrap-modals – Hercegovina

Answer 1

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

Reahard

By the way, I think it's just bottomRight, not bottomRight:-100. See this example. – Hercegovina

@Hercegovina Prompt position can be simple string (indicating the position) but also can contain an offset from that position, exactly like I've indicated in my example above it means -100px from the bottomRight ;) See here: posabsolute.github.io/jQuery-Validation-Engine/… – Reahard

Thanks for the link! I was just working off of the source in my app. I must be using an outdated version of the plugin; maybe the tip will help those out who are working on legacy apps like myself. – Hercegovina

Answer 2

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

</script>

Josefjosefa

Why should the OP try this? Please add an explanation of what you did and why you did it that way not only for the OP but for future visitors to SO. – Balch

Answer 3

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);

Keelboat