表单无效时停止打开弹出窗口

Question

我需要阻止显示错误提示时显示的弹出窗口（叠加）。这是我的代码，

<button type="submit" value="Submit" class="btn btn-primary"  id="submit" data-toggle="modal" data-target="#overlay"><i class="fas fa-paper-plane"></i> Submit</button>

function myvalidationfunction(){
  // can I do this here? 
}

document.addEventListener('invalid', (function(){
      return function(e){
          //prevent the browser from showing default error bubble/ hint
          // e.preventDefault();
          // optionally fire off some custom validation handler
           myvalidationfunction();
      };
})(), true);

<div class="modal fade product_view" id="overlay">
    <div class="modal-dialog">
       <img width="200" height="200" src="{{ asset('frontend/images/loading2.gif') }}" />
    </div>
</div>

但似乎没有任何效果。如何在这种情况下停止显示弹出窗口？