当表单有错误时，在 Javascript 的 Ninja 表单提交中弹出 Window

Question

我的 Ninja 表单上有一条自定义弹出消息，让用户知道表单正在处理中。这样做的目的是防止用户多次提交重复提交。我在 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>

Answer 1

我通过更改“提交”按钮的样式找到了解决问题的不同方法，一旦值更改为 "Processing." 这不需要 JS，而且它不会弹出消息或灰色屏幕，它确实阻止用户提交同一表单的多个实例。我将此行添加到我的样式 sheet:

/* 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，这会阻止元素被点击。请注意，使用它可以防止光标的任何自定义样式。

当表单有错误时，在 Javascript 的 Ninja 表单提交中弹出 Window

Pop Up Window on Ninja Form Submission with Javascript when a Form has Errors

javascript

ninja-forms