jQuery Validation sui campi di input post/custom post di WordPress

WordPress è una piattaforma di blogging/CMS multiutente fighissimo, ma al suo interno non ha previsto un sistema di controllo sui campi che vengono lasciati vuoti, problema sempre presente se non siete voi a inserire i contenuti sul sito, ma qualcun’altro che magari nemmeno conoscete (come nel mio caso), nonostante abbia jQuery installato nativamente sia in front-end che in back-end.

Ovviamante la soluzione migliore e più ovvia è jQuery Validation, di seguito potete trovare lo script, che io ho trovato qui, e che ho modificato un pò, valida anche se avete dei metaboxes custom.

1
2
3
4
5
function inserisci_validate() {
 echo '<script type="text/javascript" src="/path−to/jquery.validate.min.js"></script>';
 echo '<script type="text/javascript" src="/path−to/initvalidate.js"></script>';
 }
add_action('admin_head', 'inserisci_validate');
function inserisci_validate() {
 echo '<script type="text/javascript" src="/path−to/jquery.validate.min.js"></script>';
 echo '<script type="text/javascript" src="/path−to/initvalidate.js"></script>';
 }
add_action('admin_head', 'inserisci_validate');

Questo va inserito nel file function.php per caricare, nella forma corretta per WordPress, i file del plugin jQuery Validation e del file che inizializza lo script.

Nel file initvalidate.js dovete mettere questo codice:

1
2
3
4
5
6
7
8
9
10
11
jQuery(document).ready(function($){ 
var form = $("form[name='post']"); $(form).find("input[type='submit']").click(function(e){ 
e.preventDefault(); 
$(form).validate();  
if($(form).valid()) { 
$("#ajax-loading").show(); 
$(form).submit(); 
}else{ $("#publish").removeClass().addClass("button-primary"); 
$("#ajax-loading").hide(); }
 }); 
});
jQuery(document).ready(function($){ 
var form = $("form[name='post']"); $(form).find("input[type='submit']").click(function(e){ 
e.preventDefault(); 
$(form).validate();  
if($(form).valid()) { 
$("#ajax-loading").show(); 
$(form).submit(); 
}else{ $("#publish").removeClass().addClass("button-primary"); 
$("#ajax-loading").hide(); }
 }); 
});

Io ho cambiato la terza riga da 1 -> a 2:

1
2
$(form).find("input[type='submit']").click(function(e){
$(form).find("#publish").click(function(e){
$(form).find("input[type='submit']").click(function(e){
$(form).find("#publish").click(function(e){

Perché così lo script si attiva per qualsiasi pulsante di tipo submit, anziché per il solo tasto di pubblicazione.

E la n° otto da 3 -> a 4:

3
4
$(form).submit();
$(this).submit();
$(form).submit();
$(this).submit();

Perché con lo script originale il post si salvava solo come bozza ed era impossibile pubblicarlo dalla pagina di editing del post

Da non dimenticare, per far funzionare lo script dovete aggiungere ai campi che volete validare la classe request, se li state creando come nuovi metabox oppure per i campi già esistenti senza andare a modificare il core potete aggiungergli la classe con jquery prima della validazione con:

1
$("#title").addClass("required");
$("#title").addClass("required");

per esempio per il titolo della pagina.

Alla fine ho anche aggiunto un alert(‘Hai dimenticato qualche campo, sono segnati in rosso’); nell else ovvero quando qualche campo non è stato compilato per essere sicuro che lo user capisca che il post non si salva e come mai.

E’ tutto.

I commenti sono chiusi.