Show required pop-up (bubble) of input

Question

I used e.preventDefault(); to disable scrolling page to invalid input . I'm tried for that scrollintoview(false) , with by default scroll site to top, but it doesn't do anything.

Now, for scrolling page to invalid input , I'm using my own function that center element on screen.

Unfortunately, with this method I also disabled a warning bubble and focus on invalid element. Triggering focus it's not hard - input.focus(); . But what should I do, to show input error bubbly by JS? For some reason, I can't use form.reportValidity() function. I need something like input.triggerError();

 // JS code, to center site on element: // event.preventDefault(); // var elOffset = element.getBoundingClientRect().top + window.scrollY; // var elHeight = element.height(); // var windowHeight = window.innerHeight; // var offset; // if (elHeight < windowHeight) { // offset = elOffset - ((windowHeight / 2) - (elHeight / 2)); // } // else { // offset = elOffset; // } // window.scrollTo(0, offset); // element.focus(); // I CAN'T DO THIS: // FORM.reportValidity(); // I'm searching for sth like this: // element.reportValidity(); 

 body { margin-top: 70px; } .fixed-menu h1, .fixed-menu p { color: #ffffff; margin: 0; } .fixed-menu { background-color: #222; border-color: #080808; top: 0; border-width: 0 0 1px; position: fixed; right: 0; left: 0; z-index: 1030; height: 70px; } 

 <div class="fixed-menu"> <h1>This is fixed menu</h1> <p>I'm using e.preventDefault(); to disable that activity</p> </div> <form> <br> <label>this is input: <input type="text" required> </label> <p style="margin-bottom: 100px"><b>Tip:</b><br> 1. leave this input, and srcoll to submit button.<br> 2. click on it.<br> 3. see - scroll is not good enought</p> <button type="submit">Submit form</button> </form> 

Answer 1

Here is some hints that helps explaining my solution :

• I see what you did when you have styled the body element margin-top: 70px; that worked in the snippet but not in the browser, so I've opted to a slightly different solution with the same spirit, that's the explanation of the css Now to the nitty-gritty :
• You use the invalid event on the input element and you use scrollBy method to scroll the element down by 70px of the fixed menu + any margin or border hence -80
• You may ask why using setTimout instead of directly calling scrollBy inside the handler, the answer is that will not work because it will be in conflict with other actions that JavaScript consider more important which are : the not good enough scrolling and the displaying the label. The solution to that is in adding scrollBy to the queue of actions by calling it asynchronously by setTimout

 document.getElementById("inp").addEventListener("invalid",function(){ setTimeout(function(){ scrollBy(0,-80) },0) }) 

 .body { position:relative; } .fixed-menu h1, .fixed-menu p { color: #ffffff; margin: 0; } .fixed-menu { background-color: #222; border-color: #080808; top: 0; border-width: 0 0 1px; position: fixed; right: 0; left: 0; z-index: 1030; height: 70px; } Form{ position:absolute; top:70px; } 

 <div class="fixed-menu"> <h1>This is fixed menu</h1> <p>I'm using e.preventDefault(); to disable that activity</p> </div> <form> <br> <label>this is input: <input id="inp" type="text" required> </label> <p style="margin-bottom: 100px"> <b>Tip:</b><br> 1. leave this input, and srcoll to submit button.<br> 2. click on it.<br> 3. see - scroll is now good enought </p> <button type="submit">Submit form</button> </form>