10

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?

Hailwood
  • 89,623
  • 107
  • 270
  • 423

3 Answers3

14

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" />
qdev
  • 1,371
  • 1
  • 15
  • 18
  • By the way, I think it's just `bottomRight`, not `bottomRight:-100`. [See this example.](https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/demos/demoPerFieldPromptDirection.html) – rinogo Apr 13 '19 at 18:39
  • @rinogo 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: http://posabsolute.github.io/jQuery-Validation-Engine/#prompt-position-adjustment – qdev Apr 15 '19 at 06:36
  • 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. – rinogo Apr 15 '19 at 18:16
0
<script type="text/javascript">
    $(function () {
        $("#form1").validationEngine('attach', { promptPosition: "topLeft" });
    });
    function RValidate() {
        $("#form1").validationEngine('detach');
    }

</script>
Bhavesh Bais
  • 11
  • 2
    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. – Jay Blanchard Mar 24 '15 at 14:31
0

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);
Nasir Javed
  • 31
  • 1