Se requiere entrada HTML5, desplácese hasta la entrada con la barra de navegación fija al enviar

Question 1

Cuando intento enviar un formulario al que le faltan campos obligatorios, mi navegador (Chrome) muestra un mensaje que menciona que falta un campo y, si está fuera de mi pantalla, se desplaza hacia arriba.

Mi problema es que tengo un encabezado fijo de 50 px en mi página web y, como resultado, el campo de entrada está oculto y el mensaje parece salir de la nada:

En vez de

¿Hay alguna forma de evitar esto?

Intenté aplicar el margen de 50px a <html> y para <body>

Salud

EDITAR

Aquí hay un violín del problema: http://jsfiddle.net/LL5S6/1/

Question 2

Tuve exactamente el mismo problema y lo resolví usando jquery con este código:

var delay = 0;
var offset = 150;

document.addEventListener('invalid', function(e){
   $(e.target).addClass("invalid");
   $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay);
}, true);
document.addEventListener('change', function(e){
   $(e.target).removeClass("invalid")
}, true);

El desplazamiento debe ser la altura de su encabezado y el retraso es el tiempo que desea que tarde en desplazarse hasta el elemento.

Question 3

La única forma que encontré es agregar una ‘anulación’ al controlador no válido. Para implementar esto para cada entrada en su formulario, puede hacer algo como esto.

var elements = document.querySelectorAll('input,select,textarea');
var invalidListener = function(){ this.scrollIntoView(false); };

for(var i = elements.length; i--;)
    elements[i].addEventListener('invalid', invalidListener);

Esto requiere HTML5 y está probado en IE11, Chrome y Firefox.
Créditos a @HenryW por encontrar eso scrollIntoView funciona como se esperaba.

Tenga en cuenta que el parámetro falso para scrollIntoView alinea la entrada con la parte inferior, por lo que si tiene un formulario grande, puede alinearse con la parte inferior de la página.

jsfiddle

Question 4

En navegadores modernos hay una nueva propiedad CSS para ese caso de uso:

html {
    scroll-padding-top: 50px;
}

Tu JSFiddle actualizado: http://jsfiddle.net/5o10ydbk/

Compatibilidad con navegadores para scroll-padding: https://caniuse.com/#search=scroll-padding

Question 5

Cuando hay varias entradas no válidas en el formulario, solo desea desplazarse hasta la primera de ellas:

var form = $('#your-form')
var navbar = $('#your-fixed-navbar')

// listen for `invalid` events on all form inputs
form.find(':input').on('invalid', function (event) {
    var input = $(this)

    // the first invalid element in the form
    var first = form.find(':invalid').first()

    // only handle if this is the first invalid input
    if (input[0] === first[0]) {
        // height of the nav bar plus some padding
        var navbarHeight = navbar.height() + 50

        // the position to scroll to (accounting for the navbar)
        var elementOffset = input.offset().top - navbarHeight

        // the current scroll position (accounting for the navbar)
        var pageOffset = window.pageYOffset - navbarHeight

        // don't scroll if the element is already in view
        if (elementOffset > pageOffset && elementOffset < pageOffset + window.innerHeight) {
            return true
        }

        // note: avoid using animate, as it prevents the validation message displaying correctly
        $('html,body').scrollTop(elementOffset)
    }
})

JSFiddle

Question 6

ok, hice una prueba sucia con un fragmento de código que encontré aquí en SO

Como es un código de otra persona, simplemente lo modifico para desplazarme hasta el elemento al que le faltaba un requisito de entrada. No quiero ningún crédito por ello, y tal vez ni siquiera sea lo que tienes en mente, tú o alguien más podría usarlo como referencia.

El objetivo era obtener la identificación del elemento de entrada olvidado/incorrecto:

            var myelement = input.id;
            var el = document.getElementById(myelement);
            el.scrollIntoView(false);

Tenga en cuenta que este violín solo funciona para su violín publicado anteriormente, no maneja múltiples campos de entrada olvidados o incorrectos. Solo quería mostrar una alternativa.

—–>jSFiddle

Question 7

Traté de usar el método de TJ Moats, pero no funcionó como era necesario, porque a menudo volvía al campo, lo cual era incorrecto al principio.

Entonces, lo hice:

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);

body {
    margin: 0;
    margin-top: 50px;
    text-align: center;
}

header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #CCCCCC;
    text-align:center;
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<header>This is the header</header>
<div>
<form action="">
<br>
    <input id="text" type="text" required="required" /><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br>
        <p>Click send (at the bottom of the page), without filling the input field.</p><br><br><br><br><br><br>
        <input id="text" type="text" required="required" /><br><br>
    <input type="submit" id="btnSubmit" />
    </form>
</div>

Espero que sea útil para la gente 🙂

Question 8

Puedes usar oninvalid atributo de evento de HTML5 y en la etiqueta de su script escriba una función para redirigirlo.

Aquí está el ejemplo:

<input type="text" required oninvalid="scroll_to_validator(this)">

<script>
    function scroll_to_validator(input)
        {
        input.focus(); 
        }
</script>

Y al hacer clic en el botón Enviar, se desplazará al campo no válido.

Para el botón de radio, agregue solo en una radio con el mismo nombre
Aquí está el ejemplo (jsfiddle)

jsfiddle

¿Ha sido útil esta solución?