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

• Vandaahl

• June 13, 2014 at 12:47 am

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.