Error prompt position issue with validationengine plugin (Position Absolute)

css, jquery, jquery-validation-engine

Solution

I just used this code in js

$('#frmTest').validationEngine({promptPosition : "bottomRight"});

and this in css

.formError{margin-top: 15px!important;}

and it looks good. The updated fiddle is here.

I hope this helps you.

HTML

<!DOCTYPE html>
    <html>
    <head>
        <title>Demo</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>

    <form id="frmTest" style="position:relative">
        <div id="divContents" style="position:relative; overflow-y:auto; overflow-x:none;">
            <div class="row1">
                <span>FName:</span>
                <input id="txtFName" data-prompt-position="bottomRight" class="validate[required] text-input" tabindex="1" />
            </div>
            <div class="row2">
                <span>LName:</span>
                <input id="txtLName" class="validate[required] text-input" tabindex="2" />
            </div>
            <div class="row3">
                <span>Age:</span>
                <input id="txtAge" class="validate[required, custom[integer],min[1]] text-input" tabindex="3" />
            </div>
        </div>
        <input type="submit" id="btnSubmit" value="Submit" />
    </form>
    </body>
    </html>​

CSS

body
{
    margin: 0 auto;
    font-family: Arial;
    font-size: 12px;
    line-height: 20px;
}

div.row1, div.row2, div.row3
{
    min-height: 100px;
}

span
{
    clear: both;
    float: left;
    margin-left: 10px;
    padding: 20px 5px 0 20px;
    width: 50px;
}

#txtFName, #txtLName, #txtAge
{
    margin-top: 20px;
}

input[type=text]
{
    width: 150px;
}
.formError{
    margin-top: 15px!important;
}

​JS

$('#frmTest').validationEngine({promptPosition : "bottomRight", autoPositionUpdate: true});

$('#txtFName').focus();

$('#btnSubmit').click(function(){
    return $('#frmTest').validationEngine();
});
​

Also, more documentation here.

Problem

I am using Position Absolute's Validation Engine for validating values on form. The issue is that on validation, the error prompts do not appear attached to the textboxes (input type:text) as they are expected. I know that the issue is with the margin-top that I have given to the textboxes but I cannot change that. Sample code snippet is provided here... html: ``` <form id="frmTest" style="position:relative"> <div id="divContents" style="position:relative; overflow-y:auto; overflow-x:none;"> <div class="row1"> <span>FName:</span> <input id="txtFName" data-prompt-position="bottomRight" class="validate[required] text-input" tabindex="1" /> </div> <div class="row2"> <span>LName:</span> <input id="txtLName" class="validate[required] text-input" tabindex="2" /> </div> <div class="row3"> <span>Age:</span> <input id="txtAge" class="validate[required, custom[integer],min[1]] text-input" tabindex="3" /> </div> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <input type="submit" id="btnSubmit" value="Submit" /> </form> ``` JS: ``` $('#frmTest').validationEngine(); $('#txtFName').focus(); $('#btnSubmit').click(function(){ return $('#frmTest').validationEngine(); }); ``` jsFiddle. The divs that I have created are just sample but in live environment, they are collapsible divs. Also, I don't want to hard-code data-prompt-position value for each input field as there are more than 100 fields in each form. So am looking for a generic way of handling this issue (which I know is possible through CSS but don't know how?) The demo setup having the issue is on www.x-lant.com Use guest / pwd to login to the application.

Original source