Question

在我们的付款表单上按下提交按钮时，我一直在实施简单的CSS <div>叠加层。但是，在与客户端JavaScript验证相结合时，我遇到了麻烦。

CSS：

#ukip-load {
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    padding-top: 50px;
    display: none;
}
#ukip-load i {
    margin-bottom: 15px;
}
#ukip-load strong {
    padding: 10px;
    background: white;
    border-radius: 10px;
}

HTML：

<div id="ukip-load">
    <i class="fa fa-fw fa-5x fa-spin fa-spinner"></i>
    <br>
    <strong>Form submitting, please wait...</strong>
</div>
<button onclick="loadingSpinner();">Submit</button>

JavaScript的：

<script type="text/javascript">
function loadingSpinner() {
    document.getElementById("ukip-load").style.display = "block";
}
</script>

的jsfiddle：

This 是基本概念，适用于我需要的内容。

但是，我们通过JavaScript alert()框进行客户端验证，如果缺少某些关键元素，即选择了通行证的天数，但是他们希望参加的日期会弹出不符合。这些警报与我的叠加层同时出现。

有没有办法修改我的功能并检查窗口中当前是否有alert()？然后我不需要运行（return false？）我的函数，所以他们可以继续修改表单。

只有当表格实际提交我希望我的叠加层出现时才会出现。

仅限标准JavaScript，如果可能。

Answer 1

不是直接调用加载微调器函数，而是创建验证函数。在这个函数里面，使用if .. else条件，你可以检查关键元素。如果缺少元素，则显示警报，否则可以调用loadingSpinner函数。例如：

<script type="text/javascript">
   function loadingSpinner() {
      document.getElementById("ukip-load").style.display = "block";
   }
   function validate(){
   // write validation code here.   
     if(isValid){
        alert("please fill correct details");
     }
     else{
        loadingSpinner();
     }
   }

在你应该拥有的身体里面：

<button onclick="validate();">Submit</button>

这样做会将您的验证和提交代码分开。所以，一次，你会有一个警报或该功能将被提交。

希望这有帮助！

Answer 2

Javascript alert对话框是同步的。它们在主线程上运行，因此在打开警报时，您无法运行任何代码。

如果您确实需要检测警报是否已打开，则需要使用自定义HTML对话框。您还可以获得样式和自定义行为的额外奖励。

如果未显示警报，则运行功能

2 个答案: