Support

Account

Home Forums General Issues Input validation not working with front-end form generated by ajax

Unread

Input validation not working with front-end form generated by ajax

  • I am using ajax to insert an ACF form on a front-end template. However, when I fill in the form and press the submit button, I am being redirected without the form first validating my input. So I am probably missing something. Here’s what I have:

    Functions.php:

    // Initialize the ajax
    add_action('wp_ajax_sm_process_repeat_order', 'sm_process_repeat_order');
    
    function sm_process_repeat_order() {
        
        // Verify a nonce has been set, else don't run the script
        if( !isset( $_POST['sm_nonce'] ) || !wp_verify_nonce($_POST['sm_nonce'], 'sm-nonce') )
            die('Permissions check failed');    
    
        $author = $_POST['author'];
        $pid = $_POST['pid'];
    
        $args = array(
        	'form_attributes' => array(
                'id' => 'repeat-form'
            ),
    		'post_id' => '',
    		'field_groups' => array(1784),
    		'html_before_fields' => '',
    		'html_after_fields' => '
    			<input type="hidden" class="text" id="set_repeat_uid" name="set_repeat_uid" value="'.$author.'">
    			<input type="hidden" class="text" id="set_repeat_oid" name="set_repeat_oid" value="'.$pid.'">',
    		'return' => add_query_arg( 'repeat', '1', get_permalink($pid) ),
    		'submit_value' => 'Order'
    	);
    
        $output = acf_form( $args );
    
     	die ($output);
    
    }

    Front-script.js:

      // handle part of the processing of a repeat-order
      var processRepeatorder = function(id, author) {
        
        $('#repeat-btn').hide().after('<div id="loading-repeat"><img src="loader.gif" alt="loading" /></div>');
    
        // ajax
        data = {
          action: 'sm_process_repeat_order',
          sm_nonce: sm_vars.sm_nonce,
          author: author,
          pid: id
        };
          
        $.post(frontAjax.ajaxurl, data, function (response) {
          
          $('#repeat-order-container').show();
    
          $('#repeat-acf-container').html(response);
    
          // re-initialize ACF javascript on newly created HTML ACF form
          $(document).trigger('acf/setup_fields', $('#repeat-form'));
    
          $('#loading-repeat').hide()  
    
        });
      }

    Is there something I’m doing wrong? There are no console errors. I also noticed that the WYSIWYG editor does not work correctly (I get a text field without toolbar). The media library however does work like it should.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.