Функция запуска, если предупреждение не отображается

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 condition, вы можете проверить ключевые элементы. Если элементы отсутствуют, покажите предупреждение, иначе вы можете вызвать функцию loadSpinner. Например:

<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. Вы также получите дополнительный бонус стилизации и пользовательского поведения.