Question

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

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

有没有办法像这样偏移焦点的标题？

以下是小提琴的代码：

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
}

Answer 1

原来答案是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 )
            }
        });
    })

Answer 2

我知道问题是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 个答案: