Category: Uncategorized

WordPress inline field validation for plugins

On a recent plugin, I’ve been looking for a way to have powerful form field validation, while being really user-friendly. Using AJAX to do run a PHP server-side check from a form (to ensure that somebody can’t have duplicates) is the best way I’ve found. This is basically the same as what you’ll find on the WordPress.org Codex, but shorter, and more specific for this application.

Code:

1. Add an action on the init() action to call the sack JS script (deals with AJAX in WP)

wp_enqueue_script ( ‘sack’ );

2. Create an instance of the sack object, and create variables to pass into the PHP side.

function doesCalendarExist(wpurl, confirmationFieldName, calendarNameFieldID, submitButtonID) {

var ajaxObject = new sack(wpurl + ‘/wp-admin/admin-ajax.php’);

ajaxObject.execute = 1;

ajaxObject.method = ‘POST’;

ajaxObject.setVar( “action”, “doesCalendarExist” );

ajaxObject.setVar( “confirmationField”, confirmationFieldName);

ajaxObject.setVar( “calendarName”, document.getElementById(calendarNameFieldID).value);

ajaxObject.setVar( “submitButton”, submitButtonID);

ajaxObject.onError = function(){ alert(‘Ajax error’)};

ajaxObject.runAJAX();

return true;

}

3. Create an input field that can call javascript functions to populate the data, and a span that will hold the error message

<input name=“calendarName” type=“text” id=“calendarName” onblur=”doesCalendarExist(‘<?php echo bloginfo(‘url‘); ?>’, ‘span1’, ‘calendarName’, ‘submitCalendarAdd’);“/>

<span id=“span1″ class=”formError”></span>

4. Create a PHP function that will read the data passed from the ajaxObject. Die() statements will pass JavaScript back to the page. The dieString variable is super useful to be able to add lots of different DOM changes.

function wec_ajax_doesCalendarExist(){

$confirmationField = $_POST[‘confirmationField’];

$calendarName = $_POST[‘calendarName’];

$submitButton = $_POST[‘submitButton’];

$calendars = calendarDA::getAllcalendars();

$exists = false;

foreach($calendars as $calendar){

if(strcasecmp($calendar[‘calendarName’], $calendarName) == 0){

$exists = true;

}

}

if($exists){

$dieString = “document.getElementById(‘”. $confirmationField .“‘).innerHTML=’This calendar already exists!’;”;

$dieString .= “document.getElementById(‘”. $submitButton .“‘).disabled = true;”;

die($dieString);

}

else{

$dieString = “document.getElementById(‘”. $confirmationField .“‘).innerHTML=”;”;

$dieString .= “document.getElementById(‘”. $submitButton .“‘).disabled = false;”;

die($dieString);

}

}

5. Add a WordPress Action to the init() that maps the sack action to the PHP function. you have to add “wp_ajax_” to the beginning of your action name from sack. the second argument is the name of your function that this action will call

add_action(‘wp_ajax_doesCalendarExist’, ‘wec_ajax_doesCalendarExist’ );