WordPress: associare i campi di un form ai messaggi AJAX con jQuery

Possiamo visualizzare i messaggi generati da una validazione AJAX semplicemente associando ciascun campo di un form al suo corrispettivo messaggio sfruttando la serializzazione in JSON degli array associativi PHP.

Supponiamo di aver creato un form per i contatti e che la seguente classe gestisca la corrispondente action AJAX.

<?php
class MyAjax {
	public function __construct() {
		add_action( 'wp_ajax_my_contact', array( &$this, 'contact' ) );
		add_action( 'wp_ajax_nopriv_my_contact', array( &$this, 'contact' ) );	
	}
	
	public function contact() {
		$name = $_POST['fullname'];
		$email = $_POST['email'];
		$subject = $_POST['subject'];
		$message = $_POST['message'];
		
		$output = array();
		$errors = array();
		
		if( empty( $name ) || $name == '' ) {
			$errors['fullname'] = 'Name missing';
		}
		
		if( !filter_var( $email, FILTER_VALIDATE_EMAIL ) ) {
			$errors['email'] = 'Not a valid email address';
		}
		
		if( empty( $subject ) || $subject == '' ) {
			$errors['subject'] = 'Subject missing';
		}
		
		if( empty( $message ) || $message == '' ) {
			$errors['message'] = 'Message missing';
		}
		
		if( count( $errors ) > 0 ) {
			$output['errors'] = $errors;
			echo json_encode( $output );
			exit();
		} else {
			$to = 'your@address';
			$headers = 'From: ' . $name . ' <'. $email .'>' . "\r\n";
			$body = strip_tags( $message );
			
			wp_mail( $to, $subject, $body, $headers );
			
			$output['success'] = 'Email successfully sent';
			echo json_encode( $output );
			exit();
		}
	}
}

$myAjax = new MyAjax();

Se l'utente invia senza compilare, l'output JSON sarà il seguente:

{
	"errors": {
		"fullname": "Name missing",
		"email": "Not a valid email address",
		"subject": "Subject missing",
		"message": "Message missing"
		
	}
}

Il segreto sta nel dare alle voci dell'array associativo PHP (e quindi alle proprietà dell'oggetto JSON) lo stesso nome dell'attributo name dei campi del form. Quando viene effettuata la richiesta AJAX è molto semplice associare ad un campo il suo messaggio:

$( "#contact-form" ).submit(function( e ) {
	e.preventDefault();
	var $form = $( this ),
		wpAJAX = "http://" + location.host + "/wp-admin/admin-ajax.php",
		query = "action=my_contact&" + $form.serialize();
		
	$( ".message", $form ).remove(); // Evitiamo duplicati
		
	$.post( wpAJAX, query, function( data ) {
		var obj = JSON.parse( data );
		if( obj.success ) {
			// Messaggio di invio effettuato
		} else {
			var errors = obj.errors;
			for( var prop in errors ) {
				var $field = $( "[name=" + prop + "]", $form ); // Campo corrente
				var msg = "<div class='message error'>" + errors[prop] + "</div>";
				$field.after( msg );
			}
		}
	});
});