jQuery 工具验证器错误消息位置答案

【问题标题】：jQuery tools validator error messages positionjQuery 工具验证器错误消息位置
【发布时间】：2013-07-16 11:25:14
【问题描述】：

我目前正在使用 jQuery 工具验证，但错误消息的位置是绝对的。因此，如果我的表单足够大并且需要向下滚动，错误消息也会滚动。

我想要的是消息保持在它们的位置，即在我的输入字段的顶部。

这可能 100% 是 CSS 问题，但我无法修复它。

我这里有一些全局配置：

$.tools.validator.conf.lang = 'el';
$.tools.validator.conf.position = "top left";
$.tools.validator.conf.message = "<div><em/></div>";  // em element is the arrow
$.tools.validator.conf.offset = [-5, 35];
$.tools.validator.conf.errorclass = "invalid";
$.tools.validator.conf.messageClass= 'form-validation-error';

我的 CSS 是：

.form-validation-error {
    height:15px;
    background-color:#DC1E32;
    font-size:11px;
    border:1px solid #DC1E32;
    padding:4px 10px;
    color: #fff;
    display:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius: 5px;

    -moz-box-shadow:0 0 6px #ddd;
    -webkit-box-shadow:0 0 6px #ddd;
}

.form-validation-error p {
    margin:0;
}

.form-validation-error em {
  display:block;
  width:0;
  height:0;
  border:10px solid;
  border-color:#DC1E32 transparent transparent;

  position:absolute; 
  bottom:-17px;
  left:60px;
  }

我这样使用我的验证器：

<script type="text/javascript">
  $( document ).ready( function()
  {
     $( "form" ).validator();
  } );
</script>

请帮忙。

【问题讨论】：

标签： jquery css html validation jquery-tools

【解决方案1】：

尝试位置：固定；这会让它留在原地。您可能需要调整左下角。

【讨论】：

感谢您的回答。我已经尝试过了，但没有成功。我把它放在 form-validation-error css 规则中，但它被样式规则覆盖（我想是由 javascript 创建的）。有没有办法把它作为验证器方法的配置？

【解决方案2】：

问题解决了！

我删除了这个：

html, body
{
   height: 100%;
}

来自我的 CSS。不过不知道为什么会这样。

【讨论】：