The required attribute and change the focus on error fields. How to change the situation?

How to make so that after the error screen was not the actual input field, and the height of the label with the height of the cap, for example?
jsfiddle.net/Mischuk/DQZN3
September 26th 19 at 11:38
1 answer
September 26th 19 at 11:40
Solution
jsfiddle
//the height of the cap 
var head_height = 50;

//waiting for verification of disability
document.addEventListener('invalid', (function(){
 //flag for the first message about incorrect data
 var is_first = true;
 return function(e){
if(is_first){
 is_first = false;

setTimeout(function(){
 //reset is_first once again it was possible to send empty data
 is_first = true;
 //top label of the input, on the screen page
 var etop = $(e.target).prev("label").offset().top;
 //the top of the label relative to the visible part of the page
 var top = etop - $(window).scrollTop();

 //if the tip is hidden outside the screen caps, you will skryim to the label
 if (top < head_height) {
 window.scrollTo(0, etop - head_height);
}
 }, 9);
}
};
})(), true);

Find more questions by tags CSSHTMLjQuery