Validation using ajax in wordpress - php

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>
Delete
Edit
</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>
Update
Cancle
</td>
</tr>
<?php
}
?>
</table>
<?php
}
die();

Answer 2

You can do like some steps below:
Step 1: Localize WP Ajax URL
<?php
add_action('wp_head','pluginname_ajaxurl');
function pluginname_ajaxurl() { ?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}
Step 2: Send your post information by using ajax
$.ajax({
type: 'post',
url: ajaxurl ,
data: {
action: 'validation',
data: [yourdata]
},
beforeSend: function() {},
success: function(resp) {
}
});
Step 3: Receive data on PHP server by using WP Hook
<?php
// this action will run for loged in user
add_action('wp_ajax_validation', 'exclutips_fep_add_post');
// This action will run for visitor
add_action('wp_ajax_wp_ajax_nopriv_validation', 'exclutips_fep_add_post');?>
Hope Those can help you solve your problem.

Answer 3

Your question is a bit open ended. But one important piece of security validation is implementing nonces. This checks the ajax request is coming from your site as intended, which prevents a variety of attacks.
In your php you create a nonce and pass it into the javascript as a variable.
wp_register_script( 'your-script', /*file url here*/ , /*dependencies here*/, false, false);
$params = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce('name-the-nonce'),
);
wp_localize_script( 'your-script', 'jsParameters', $params );
wp_enqueue_script( 'your-script' );
In your javascript you pass the nonce to the php like so:
var ajaxRequest = $.post(
jsParameters.ajaxurl,
{
action: 'your_action',
// send the nonce along with the request
nonce: jsParameters.nonce
},
function (response) {
//some reponse code
}
);
Within the AJAX php function you perform this validation:
$nonce = $_POST['nonce'];
if (!wp_verify_nonce($nonce, 'name-the-nonce'))
die('Busted');
//continue executing ajax php code
Some external material on the matter:
https://codex.wordpress.org/WordPress_Nonces
http://www.barrykooij.com/check-nonces-wordpress-ajax-calls/