Error prompt position issue with validationengine plugin (Position Absolute)
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();
});
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.
Answer
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.