首页 > 解决方案 > 提交后如何关闭引导模式?

问题描述

在这里,我有一个 Bootstrap 模式。我的要求是当我使用提交按钮成功提交表单时,我想在几秒钟后关闭模式。这里的问题是,当我在输入中输入一些文本而不是整数时,或者如果我输入了一些无效的输入,然后当我单击提交按钮时,输入字段会显示错误,并且模式会在几秒钟后立即关闭。

如果单击提交按钮时输入字段无效,我不想关闭引导模式。

我该怎么做 ?

编辑:它适用于有效输入。

html

 <div class="modal-body">
 <form action="">
     <input type="number" name="rows" min="0" value="0" max="10" required><br>
     <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
 </form>
 </div>

脚本

<script>
 $('#my_button').click(function() {
    setTimeout(function() {$('#myModal').modal('hide');}, 4000);
});
</script>

标签: javascripthtmljquerybootstrap-modal

解决方案


如果表单具有无效值,请不要设置超时:

$('#my_button').click(function() {
  if ( ! $('form input:invalid' ).length ) {
    setTimeout(function() {$('#myModal').modal('hide');}, 4000);
  }
});

推荐阅读