Всплывающее окно при отправке формы ниндзя с помощью Javascript, если форма содержит ошибки

У меня есть настраиваемое всплывающее сообщение в моей форме ниндзя, которое позволяет пользователю узнать, что форма обрабатывается. Целью этого является предотвращение дублирования представлений пользователем, отправляющим более одного раза. На странице моей формы в Wordpress запущен скрипт.

Сценарий запускает onClick, но это вызывает проблемы, если пользователь пропускает обязательное поле. Появляется сообщение об ошибке, но всплывающее окно не позволяет пользователю вернуться и внести изменения. Есть ли лучшее действие для запуска сценария, который предотвращает это?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="/js/jquery.blockUI.js' "></script>
<script type="text/javascript"> 
    // unblock when ajax activity stops 
    $('.nf-form').on( 'submitResponse', function() { $.unblockUI(); }); 

    $(document).on('click', '#nf-field-354', function() {
   $.blockUI( { 
       message: '<h3>Please Wait While Your Registration Submits</h3><p>(We know, we don\'t like to wait either)</p>',
       css: {
            padding:    '15px',
            'text-align': 'center',
            color:      '#212121',
            border:     'none',
            backgroundColor:'rgba(255, 255, 255, 0.9)',
            cursor:     'wait',
            '-webkit-border-radius':'3px',
            '-moz-border-radius':   '3px',
            'border-radius':        '3px'
        } } );
});
</script>

javascript ninja-forms
person GDailey    schedule 18.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел другое решение проблемы, изменив стиль кнопки «Отправить», когда значение изменится на «Обработка». Для этого не требуется JS, и, хотя в нем нет всплывающего сообщения или затененного экрана, он не позволяет пользователю отправлять несколько экземпляров одной и той же формы. Я добавил эту строку в свою таблицу стилей:

/* Ninja Forms Processing Hack */

 input[value="Processing"], input[value="Processing"]:hover {
   user-select : none !important; 
   -moz-user-select : none !important;
   -webkit-user-select : none !important;
 pointer-events: none !important;
 opacity: .5 !important; }

Пометка каждой строки !important может не потребоваться. Я просто хотел убедиться, что он имеет приоритет в стиле страницы. Функциональность зависит от pointer-events, что предотвращает щелчок по элементу. Обратите внимание, что использование этого параметра предотвращает любой пользовательский стиль курсора.

person GDailey    schedule 06.03.2020