我正在使用Position Absolute 的验证引擎来验证表单上的值。
问题是在验证时,错误提示不会像预期的那样附加到文本框(输入类型:文本)。我知道问题出在我给文本框的边距顶部,但我无法改变它。此处提供了示例代码片段...
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();
});
我创建的 div 只是示例,但在实际环境中,它们是可折叠的 div。另外,我不想为每个输入字段硬编码 data-prompt-position 值,因为每个表单中有超过 100 个字段。所以我正在寻找一种处理这个问题的通用方法(我知道这可以通过 CSS 但不知道如何?)
有问题的演示设置在www.x-lant.com
使用guest / pwd登录应用程序。