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

尝试位置：固定;这将使它保持原状。您可能需要调整左侧和底部。

Answer 2

问题解决了！

我删除了这个：

html, body
{
   height: 100%;
}

来自我的CSS。不知道为什么它会这样工作。

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

2 个答案: