标签中带有验证表单的Bootstrap 4会停止传播事件

Question

我启动了Bootstrap 4，我想在输入无效的地方显示导航药丸。

当我保存时，用一个按钮在表单中，因为没有显示输入，所以描述输入无法聚焦。

名称='url'的无效表单控件不可聚焦。

发生的事情是该事件已启动多次，因此同时显示了表1和表3。

是否可以取消下一个事件，使其依次显示选项卡？

$('form input').on('invalid', function (event) {
    event.preventDefault();
    event.stopPropagation();

    var element = $(this).closest('div.tab-pane').index();
    $('#nav-tab a:nth-child(' + element + ')').tab('show');
});

当我单击保存两次时，我遇到了问题...而且我无法解释...

如何避免这个问题？

JSFiddle出现复制问题：http://jsfiddle.net/3cxu8m2a/1/