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

Question

I have a custom popup message on my Ninja Form that lets the user know the form is processing. The goal of this is to prevent duplicate submissions by the user submitting more than once. There is a script running on the page of my form on Wordpress.

The script fires 'onClick' but this is causing issues if a user misses a required field. There is an error message generated, but the popup prevents the user from going back and making changes. Is there a better action to trigger the script that prevents this?

<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

I found a different solution to the problem by changing the styling of the Submit button, once the value changes to "Processing." This does not require JS and, while it doesn't have the message pop up or the greyed out screen, it does prevent the user from submitting multiple instances of the same form. I added this line to my style 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; }

Tagging every line !important might not be necessary. I just wanted to ensure it took precedence in the page style. The functionality hinges on pointer-events, which prevents the element from being clickable. Note that using this prevents any custom styling of the cursor.