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

Question

我目前正在使用 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>

请帮忙。

Answer 1

尝试位置:固定；这将使它留在原地。您可能需要调整左侧和底部。