修复了标题隐藏错误消息答案

【问题标题】：Fixed header hiding error messages修复了标题隐藏错误消息
【发布时间】：2014-04-15 21:37:57
【问题描述】：

我遇到了一个问题，我在表单上有一个固定的标题。当有人去提交该表单，并且该表单的字段未正确填写时，错误消息会被浮动在其上方的固定标题隐藏。

附加的是一个更好地描述问题的jsfiddle。不要填写任何字段，只需向下滚动并按提交，您会注意到固定标题上方出现错误消息，但该字段被隐藏

有什么办法可以抵消这样的焦点的标题吗？

这是小提琴的代码：

HTML

<div class="container">
<div class="header"></div>

<div class="wrapper">
    <form action="#">
        <label for="one">One</label>
        <input type="text" required="required" id="one" name="one" />

        <label for="two">two</label>
        <input type="text" required="required" id="two" name="two" />

        <label for="three">three</label>
        <input type="text" required="required" id="three" name="three" />

        <label for="four">four</label>
        <input type="text" required="required" id="four" name="four" />
        <p>scroll down for submit button</p>
        <input type="submit" value="submit" id="submit">
    </form>
</div>

CSS

body, html {
    margin: 0;
    padding: 0;
}

input, label {
    display: block
}

.container {
    height: 1500px
}

.wrapper {
    padding-top: 200px
}

.header {
    height: 200px;
    position: fixed;
    background: red;
    width: 100%;
}

#submit{
    margin-top: 500px
}

【问题讨论】：

标签： html css forms validation css-position

【解决方案1】：

我知道这个问题是 4 年前发送的，但这里是 jQuery 代码：

var navhei = $('.header').height();
var navheix = navhei + 30;
document.addEventListener('invalid', function(e){
$(e.target).addClass("invalid");
   $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - navheix }, 0);

setTimeout(function(){
$('.invalid').removeClass('invalid');
},0300);
}, true);

这是JSFiddle 代码示例。

我希望它可以帮助一些人，因为我知道这是很烦人的事情。

【讨论】：

【解决方案2】：

原来答案在 jQuery 中。这不是最干净的，但基本上当单击提交按钮时，将注意力集中在错误消息上，然后停止焦点一次又一次地触发。然后在每次点击提交按钮时重置。

var error;
   $('input[type=submit]').on('click', function(){
        error = 0;

        $("input").focus(function() {
            if(error === 0){
                error = 1

                var target = $(this).offset().top;
                var header = $('.l-header').height();

                $(window).scrollTop( target - header )
            }
        });
    })

【讨论】：