Question

我正在使用jQuery validate plugin并且我有一个固定的标题。

当我按下提交按钮并且缺少必填字段时，插件会直接跳转到该字段并显示它是必需的。但是，由于我有一个固定的标题，插件会跳转到该字段，因为它位于固定标题下，所以无法看到它。我该如何解决这个问题？

这是一个最小的示例代码，并且与jFiddle

相关联

$("#awesome").validate({
    rules: {
        name: "required"
    }
});

form {
    margin-top: 50px;
}

.top-menu {
    height: 50px;
    background-color: rgba(23,123,23,0.3);
    font-size: 16px;
    color: #FFF;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
}

<div class='top-menu'>Fixed Menu</div>
<form id='awesome' method='POST' >
    <input type='text' id='name' name='name'>
    <div style='height:3000px;background-color:red;'></div>
    <input type='submit'>
</form>

修改：我正在寻找与offsetting an html anchor to adjust for fixed header类似的解决方案。我有点困惑，因为我真的不知道插件是如何滚动到所需的＆＃39;领域。我找不到类似方法的东西＆＃39; scrollTo＆＃39;在插件中。如果我找到相应的代码部分，可以简单地更改它滚动到的位置偏移量？

Answer 1

我能够使用这个额外的jQuery脚本修复它（参见jFiddle）：

 $("input").focus(function(){
      var elementOffset = $(this).offset().top,
      scrollTop     = $(window).scrollTop(),
      distance      = (elementOffset - scrollTop);

      var addSpace = 50 - distance;

      if(addSpace > 0)
      {
          var y = $(window).scrollTop();  
          $(window).scrollTop(y-addSpace);
      }
  });

Answer 2

添加此css并尝试：

form#awesome input[type="text"]:focus {
    margin-top: 40px;
}

您可以根据需要更改上边距。

Answer 3

要显示另一个元素的元素，一种方法是使用z-index Property。

所以你可以对你的错误元素这样做：

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
    url: " some_upload_url ",
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    previewsContainer: '#preview', //this will change preview to element selected
    etc etc

<强> JsFiddle Demo

Answer 4

以下是带有Fixed标头的jQuery验证表单的修复版本代码。

JSFiddle演示： https://jsfiddle.net/o4dfhtgc/2/

查看演示：

$("#awesome").validate({
    rules: {
      name: "required"
    }
});

body {
  padding: 0; margin: 0;
}
form{
  margin-top: 50px;
  padding: 10px;
}
.top-menu{
  height: 50px;
  background-color: rgba(23,123,23,0.3);
  font-size: 16px;
  color: #FFF;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
}
label#name-error {
    display: inline-block;
    padding-left: 5px;
    color: #ffffff;
}
input[type="submit"] {
  display: block;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<div class='top-menu'>
  Fixed Menu
</div>

<div style='height:3000px; background-color:red;'>
  <form id='awesome' method='POST' >
    <input type='text' id='name' name='name'>  
    <input type='submit'>
  </form>
</div>

Answer 5

如果表单验证失败，这会将元素滚动到窗口的中心：

//scroll invalid inputs into the center of the window on validation failures
// noinspection JSUnresolvedFunction
$('input,select,textarea').on('focus', function () {
    if ($(this).is(':invalid')) {
        try {
            let top = $(this).offset().top;
            let height = $(this).height();
            let windowHeight = $(window).height();
            let offset = ((windowHeight / 2) < height) ?
                (top - (windowHeight / 2))
                : (top - ((windowHeight / 2) - (height / 2)));
            // noinspection JSUnresolvedFunction
            window.setTimeout(function () {
                $([document.documentElement, document.body]).animate({
                    scrollTop: offset
                }, 100);
            }, 10);
        } catch (error) {
            console.log(error);
        }
    }
});

jQuery使用固定标头验证

5 个答案: