修复了标头隐藏错误消息

Posted 2023-02-20

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

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

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

http://jsfiddle.net/sD6Rk/

这是小提琴的代码：

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

答案

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

另一答案

我知道问题是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示例。

我希望它会帮助一些人，因为我知道这是非常讨厌的事情。