在wordpress中使用ajax进行验证

Question

I am developing a wordpress plugin to allow users to submit a post from the frontend. I have added a validation method and it works. How do I implement ajax validation in my code?

<?php
function exclutips_fep($content = null) {
    global $post;
    ob_start();

?>
    <style>
    #fep-new-post label{display:inline-block;width:15%;}
    #fep-post-title input{width:60%;}
    #fep-new-post input[type="submit"]{margin-left:15%;width:30%;padding:7px;}
    #fep-new-post textarea{ display:inline-block;width:80%;vertical-align:top;}
    </style>
<div id="exclutips-fep-postbox" class="<?php if(is_user_logged_in()) echo 'closed'; else echo 'loggedout'?>">
        <?php do_action( 'exclutips-fep-notice' ); ?>
        <div class="exclutips-fep-inputarea">
        <?php if(is_user_logged_in()) { ?>
            <form id="fep-new-post" name="new_post" method="post" action="<?php the_permalink(); ?>">
                <p><label>Post Title *</label><input type="text" id ="fep-post-title" name="post-title" /></p>
                <p>
                <?php 
                $settings = array(
                'textarea_rows' => 14,
                'teeny' => true,
                'quicktags' => false,
                'textarea_name' => 'post-content',
                'media_buttons' => true,
                'editor_class' => 'front-end-post',
                'tinymce' => array(
                'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
                        'bullist,blockquote,|,justifyleft,justifycenter' .
                        ',justifyright,justifyfull,|,link,unlink,|' .
                        ',spellchecker,wp_fullscreen,wp_adv'
                    )
                );
                wp_editor( '', 'content', $settings);
                ?>
                </p>
                <p><label>Category</label>
                <select name="post-category"> 
                    <option value=""><?php echo esc_attr_e( 'Select Category', 'exclutips-fep' ); ?></option> 
                    <?php 
                     $args = array(

                        );
                    $categories =   get_categories( $args ); 
                    foreach ( $categories as $category ) {
                        printf( '<option value="%1$s">%2$s</option>',
                            esc_attr( '/category/archives/' . $category->category_nicename ),
                            esc_html( $category->cat_name )
                        );
                    }
                    ?>
                </select>

                </p>
                <p><label>Tags</label><input id="fep-tags" name="tags" type="text" tabindex="2" autocomplete="off" value="<?php esc_attr_e( 'Add tags', 'exclutips-fep' ); ?>" onfocus="this.value=(this.value=='<?php echo esc_js( __( 'Add tags', 'exclutips-fep' ) ); ?>') ? '' : this.value;" onblur="this.value=(this.value=='') ? '<?php echo esc_js( __( 'Add tags', 'exclutips-fep' ) ); ?>' : this.value;" /></p>
                <input id="submit" type="submit" tabindex="3" value="<?php esc_attr_e( 'Post', 'exclutips-fep' ); ?>" />                    
                <input type="hidden" name="action" value="post" />
                <input type="hidden" name="empty-description" id="empty-description" value="1"/>
                <?php wp_nonce_field( 'new-post' ); ?>
            </form>
        <?php } else { ?>       
                <h4 class="exclutips-fep-error">Please Log-in To Post</h4>
        <?php } ?>
        </div>

</div> <!-- #exclutips-fep-postbox -->
<?php
    // Output the content.
    $output = ob_get_contents();
    ob_end_clean();

    // return only if we're inside a page. This won't list anything on a post or archive page. 
    if (is_page()) return  $output;
}

// Add the shortcode to WordPress. [exclutips-fep] 
add_shortcode('exclutips-fep', 'exclutips_fep');


function exclutips_fep_errors(){
?>
<style>
.exclutips-fep-error{border:1px solid #CC0000;border-radius:5px;background-color: #FFEBE8;margin: 0 0 16px 0px;padding: 12px;}
</style>
<?php
    global $error_array;
    foreach($error_array as $error){
        echo '<p class="exclutips-fep-error">' . $error . '</p>';
    }
}

function exclutips_fep_notices(){
?>
<style>
.exclutips-fep-notice{ border:1px solid #E6DB55;border-radius:5px;background-color: #FFFBCC;margin: 0 0 16px 0px;padding: 12px;}
</style>
<?php

    global $notice_array;
    foreach($notice_array as $notice){
        echo '<p class="exclutips-fep-notice">' . $notice . '</p>';
    }
}

function exclutips_fep_add_post(){
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'post' ){
        if ( !is_user_logged_in() )
            return;
        global $current_user;

        $user_id        = $current_user->ID;
        $post_title     = $_POST['post-title'];
        $post_content   = $_POST['post-content'];
        $post_category  = $_POST['post-category'];
        $tags           = $_POST['tags'];


        global $error_array;

        $error_array = array();
        if (empty($post_title)) $error_array[]='Please add a post title.';
        if (empty($post_content)) $error_array[]='Please add some content.';
        if (empty($post_category)) $error_array[]='Please select category.';

        if (count($error_array) == 0){
            $post_id = wp_insert_post( array(
                'post_author'   => $user_id,
                'post_title'    => $post_title,
                'post_type'     => 'post',
                'post_content'  => $post_content,
                'post_category' => $post_category,
                'tags_input'    => $tags,
                'post_status'   => 'publish'
                ) );            
            global $notice_array;
            $notice_array = array();
            $notice_array[] = "Thank you for posting. Your post is now live. ";
            add_action('exclutips-fep-notice', 'exclutips_fep_notices');
        } else {
            add_action('exclutips-fep-notice', 'exclutips_fep_errors');
        }
    }
}

add_action('init','exclutips_fep_add_post');

Answer 1

Please try it.. it is works for me.

1) call this on click of your button.. (it is the code of your lending page)

var pathname    = window.location.pathname;
var firstName   = $('#firstName').val();
var lastName    = $('#lastName').val();
var email       = $('#email').val();
var phoneNumber = $('#phoneNumber').val();
var data        = new Array (firstName,lastName,email,phoneNumber);
$.get( ajax_request_url,
{
  'action'   : 'get_myusers',
  'data'     : data,
  'pathname' : pathname
}, 
function( response )
{
  $('.displayUsers').html(response);
  $('#myForm')[0].reset();
  $('.addForm').hide();
  $('.displayAddForm').show();
  $('.hideAddForm').hide();
},  "html" );

2) this is functions.php code

/* custom function for display user
 * using ajax user add update delete
 */
add_action('wp_footer', 'eps_footer');
function eps_footer() {
    echo "<script>var ajax_request_url = '".admin_url( 'admin-ajax.php' )."'</script>";
}



//Get user Ajax
add_action( 'wp_ajax_nopriv_get_myusers', 'get_myusers' );
add_action( 'wp_ajax_get_myusers', 'get_myusers' );

function get_myusers()
{
  $userArray = $_REQUEST['data'];
  $table = "my_table";
  $data  = array(firstName=>$userArray[0],lastName=>$userArray[1],email=>$userArray[2],foneNumber=>$userArray[3]);
  global $wpdb;
  $wpdb->insert( $table, $data );
  ?>
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Phone Number</th>
        <th>Action</th>
      </tr>  
      <?php
        $users = $wpdb->get_results( "SELECT * FROM my_table" );
        foreach($users as $user)
        {
      ?>
          <tr id="displayTr<?php echo $user->my_table_id;?>">
                <td><?php echo $user->firstName; ?></td>
                <td><?php echo $user->lastName; ?></td>
                <td><?php echo $user->email; ?></td>
                <td><?php echo $user->foneNumber; ?></td>
                <td>
                  <a href="javascript:void(0)" class="deleteUser" id="<?php echo $user->my_table_id;?>">Delete</a>
                  <a href="javascript:void(0)" class="editUser" id="<?php echo $user->my_table_id;?>">Edit</a>
                </td>
              </tr>
              <tr style="display:none;" class="editTr" id="editTr<?php echo $user->my_table_id;?>">
                <td><input type="text" id="firstName<?php echo $user->my_table_id;?>" value="<?php echo $user->firstName; ?>"></td>
                <td><input type="text" id="lastName<?php echo $user->my_table_id;?>" value="<?php echo $user->lastName; ?>"></td>
                <td><input type="text" id="email<?php echo $user->my_table_id;?>" value="<?php echo $user->email; ?>"></td>
                <td><input type="text" id="phoneNumber<?php echo $user->my_table_id;?>" value="<?php echo $user->foneNumber; ?>"></td>
                <td>
                  <a href="javascript:void(0)" class="updateUser" id="<?php echo $user->my_table_id;?>">Update</a>
                  <a href="javascript:void(0)" class="cancleEdit" id="<?php echo $user->my_table_id;?>">Cancle</a>
                </td>
              </tr>
      <?php
        }
      ?>
    </table>
<?php  
}
die();