Прокрутка к обязательному полю

[Bond]

Всем привет.
Есть форма с обязательными полями - кастомной валидации нет - только по required браузерная.
Стандартное поведение браузера - при попытке отправить форму браузер прокручивает к первому полю которое не заполнено - но получается так что отступ поля от верха страницы слишком маленький - это поле закрывается фиксированным меню.
Можно ли как то увеличить этот оступ не делая свою кастомную валидацию? К примеру что бы первое пустое поле прокручивалось на средину страницы а не в самый верх

[Nexus]

<header></header>

<form>
  
  <div style="height: 500px"></div>
  
  <input type="text" required/>
  
  <div style="height: 3000px"></div>
  
  <input type="submit"/>
  
</form>

<style>
    body {
      padding-top: 50px;
    }

    header {
      height: 50px; 
      background: red;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0.5
    }
</style>

<script>
    document.querySelector('form [type="submit"]').addEventListener('click', function () {
        const OFFSET_TOP = 25;
        
        const form = this.closest('form');
        const invalidField = [].filter.call(form.querySelectorAll('[required]'), function (field) {
            return !field.value;
        }).shift();

        if (!invalidField) {
            return;
        }

        const headerHeight = document.querySelector('header').offsetHeight;
        
        window.scrollTo(0, invalidField.getBoundingClientRect().top + document.body.scrollTop - headerHeight - OFFSET_TOP);
    });
</script>

[Bond]

Nexus,
Я хотел уточнить куда копать, а вы даже код дали. Огромное спасибо!.
Чет и не подумал сразу что можно на клик и свой скрол сделать. ))

[laimas]

return !field.value;

Скорее нужно проверять валидно ли значение, а не пусто ли оно.

[Nexus]

Bond, это не готовое решение, а его пример.
Обратите внимание на замечание laimas:

Скорее нужно проверять валидно ли значение, а не пусто ли оно.

Валидация значения поля происходит в строке 37.

[laimas]

Валидация значения поля происходит в строке 37

Это обязательность заполнения, а что если заполнено, но не тем? В вашем случае достаточно пробела и будет брак. То есть, чтобы все это вкупе работало как следует, нужно указать полям и правила, и обрабатывая событие submit проверять их.

[рони]

Nexus,

const invalidField = form.querySelector(':invalid');

[Nexus]

Это обязательность заполнения, а что если заполнено, но не тем?

Я изначально не планировал писать валидатор, в моем примере достаточно проверки на длину строки.

рони, спасибо, я почему-то считал, что у этого селектора недостаточная поддержка браузерами.