当表单出现错误时，使用Javascript提交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>

//ajax活动停止时取消阻止
$（'.nf form'）.on（'submitResponse'，function（）{$.unbui（）；}）；
$（文档）。在（'click'，'#nf-field-354'，函数（）上{
$.blockUI（{
消息：“请稍候，您的注册正在提交（我们知道，我们也不愿意等待）
”，
css:{
填充：“15px”，
“文本对齐”：“居中”，
颜色：“#212121”，
边界：“无”，
背景颜色：'rgba（255，255，255，0.9）'，
游标：“等待”，
“-webkit边界半径”：“3px”，
“-moz边界半径”：“3px”，
“边界半径”：“3px”
} } );
});

当值变为“处理”时，我通过更改Submit按钮的样式找到了一个不同的解决方案。这不需要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; }

---

标记每一行

！重要信息

可能没有必要。我只是想确保它在页面样式中优先。该功能取决于

指针事件

，这会阻止元素被单击。请注意，使用此选项可防止对光标进行任何自定义样式设置

一旦值更改为“处理”，我就通过更改提交按钮的样式找到了一个不同的解决方案。这不需要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; }

标记每一行

！重要信息

可能没有必要。我只是想确保它在页面样式中优先。该功能取决于

指针事件

，这会阻止元素被单击。请注意，使用此选项可防止对光标进行任何自定义样式设置