Front end post form validation

Question

I have a front end post from that works fine except for the validation that I need done before it's processed. Ultimately I'd like to be able to do this with ajax because I have to do some things like validate youtube url's with a php function but I want to start simple by showing errors for things like empty title. So here is what I have so far.

  <form id="new_post" name="new_post" method="post" action="" enctype="multipart/form-data">

    <p>
      <input type="text" id="title" value="Video Title" tabindex="1" size="20" name="title" />
    </p>

    <p>
      <textarea id="description" tabindex="3" name="description" cols="50" rows="6">Video Description</textarea>
    </p>

    <p>
      <div class="icon video"></div>
      <input type="text" id="video_url" value="Youtube URL" tabindex="1" size="20" name="video_url" />
      <div class="video-validation"></div>
    </p>

    <p>
      <input type="text" value="Tags" tabindex="5" size="16" name="post_tags" id="post_tags" />
    </p>

    <p align="right"><input type="submit" value="Publish" tabindex="6" id="submit" name="submit" /></p>

    <input type="hidden" name="action" value="new_post" />

    <?php wp_nonce_field( 'new-post' ); ?>

  </form>

And then the PHP to process here which seems to check if the fields are set but doesn't do anything if they aren't.

function video_process_form( $query ) {
 if ( $query->is_page( 'submit-video' ) && isset( $_POST['title'] ) ) {
   if ( ! function_exists( 'wp_handle_upload' )) {
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
            require_once(ABSPATH . "wp-admin" . '/includes/media.php');
   }
   $file=$_FILES;
   // Do some minor form validation to make sure there is content
   if ( isset($_POST['title']) && !empty($_POST['title'])) {
    $title =  $_POST['title'];
   } else {
    echo 'Please enter a game  title';
   }
   if (isset ($_POST['description'])) {
    $description = $_POST['description'];
   } else {
    echo 'Please enter the content';
   }
   if (isset ($_POST['video_url'])) {
    $video_url = $_POST['video_url'];
   }
   $tags = $_POST['post_tags'];

   // Add the content of the form to $post as an array
   $new_post = array(
    'post_title'    => $title,
    'post_content'  => $description,
    'tags_input'    => array($tags),
    'post_category' => array(12),
    'post_status'   => 'publish',           // Choose: publish, preview, future, draft, etc.
    'post_type' => fod_videos  // Use a custom post type if you want to
   );
   //save the new post and return its ID
   if (isset($_POST['title']) && !empty($_POST['title'])) {
    $pid = wp_insert_post($new_post);
    update_post_meta($pid,'video_code',$video_url);
    wp_redirect( get_permalink($pid)); 
    exit();
   }
 }
 do_action('wp_insert_post', 'wp_insert_post');
}
add_action( 'pre_get_posts', 'video_process_form' );    

So how I am failing here and what is the correct way to show errors to the client on submission? Also no I am not down to use gravity forms to solve all my problems.

Answer 1

Using isset isn't the best option, because when you submit the form the post variables will still be set, just to null. You should check if the values are null. Also you are echoing the validation error messages, when you should be assigning them to a variable and returning the variable, then outputting the returned value in the template.

function video_process_form( $query ) {
    global $error_output; 
    if ( $query->is_page( 'submit-video' ) && isset( $_POST['title'] ) ) {

        if ( ! function_exists( 'wp_handle_upload' )) {
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
            require_once(ABSPATH . "wp-admin" . '/includes/media.php');
        }

        $file = $_FILES;

        // Do some minor form validation to make sure there is content
        if ($_POST['title'] != null) {
            $title =  $_POST['title'];
        } else {
            $error_output .= 'Please enter a game  title<br/>';
        }

        if ($_POST['description'] != null) {
            $description = $_POST['description'];
        } else {
            $error_output .= 'Please enter the content<br/>';
        }

        if ($_POST['video_url'] != null) {
            $video_url = $_POST['video_url'];
        }
        $tags = $_POST['post_tags'];

        // Add the content of the form to $post as an array
        $new_post = array(
            'post_title'    => $title,
            'post_content'  => $description,
            'tags_input'    => array($tags),
            'post_category' => array(12),
            'post_status'   => 'publish',           // Choose: publish, preview, future, draft, etc.
            'post_type' => fod_videos  // Use a custom post type if you want to
        );

        // If No Errors, Save Post and Redirect //
        if ($error_output == null) {
            $pid = wp_insert_post($new_post);
            update_post_meta($pid,'video_code',$video_url);
            wp_redirect( get_permalink($pid)); 
        // If Errors, Return Errors for Display in Template //
        } 
    }
    do_action('wp_insert_post', 'wp_insert_post');
}
add_action( 'pre_get_posts', 'video_process_form' );  

Then in your template file you can do:

global $error_output;
if ($error_output != null) {
    echo '<div class="errorbox">' . $error_output . '</div>';
}