+
SharePoint list form custom validation
Pubblicato il: 17/11/2014
Da: Riccardo Celesti
Lingua: Italiano
Livello: 300

​In molte occasioni, lavorando con custom list form, può tornare utile poter inserire controlli di validazione personalizzati diversi da quelli già presenti out-of-the-box. 

Osservando il codice HTML relativo al bottone di salvataggio di ogni form noteremo una istruzione javascript di questo tipo sull'evento "click":

if (!PreSaveItem()) return false;​ ...

Questo significa che se la funzione PreSaveItem() ritorna false non sarà effettuata la successiva operazione di postback della pagina con il conseguente invio dei dati al server.​ Grazie a questa istruzione potremo inserire un controllo di validazione client side sul form definendo, o meglio ridefinendo, la funzione javascript PreSaveItem(). 

Nell'esempio seguente inseriremo un controllo di validazione per un paio di campi di frequente utilizzo e la gestione del relativo messaggio di errore. I campi che prenderemo in considerazione sono e-mail e codice fiscale. In questo esempio utilizzeremo anche jQuery per la gestione degli avvisi all'utente e per la selezione degli oggetti. Sicuramente la soluzione illustrata non può essere considerata completa nè perfetta, ma ci serve per dare un idea delle potenzialità che abbiamo a disposizione.

Andreamo ad agire su un custom list form, ricordiamo infatti che è sconsigliato modificare le form out-of-the-box. Daremo per scontato di aver già completato questa operazione e passeremo direttamente alla creazione della funzione javascript.

function PreSaveItem(){

  var email = $("input[title='E-mail']");
  var cf = $("input[title='Codice Fiscale']");

  var re_email = /^[0-9a-zA-Z]+([0-9a-zA-Z]*[-._+])*[0-9a-zA-Z]+@[0-9a-zA-Z]+([-.][0-9a-zA-Z]+)*([0-9a-zA-Z]*[.])[a-zA-Z]{2,6}$​/;
​  var re_cf = /^([A-Za-z]{6}[0-9lmnpqrstuvLMNPQRSTUV]{2}[abcdehlmprstABCDEHLMPRST]{1}[0-9lmnpqrstuvLMNPQRSTUV]{2}[A-Za-z]{1}[0-9lmnpqrstuvLMNPQRSTUV]{3}[A-Za-z]{1})|([0-9]{11})$/;
}

Nelle righe precedenti abbiamo definito una variabile per ciascun campo della form. Per validare i campi abbiamo inoltre definito due regual expression data la loro straordinaria potenza e flessibilità.

Fatto questo inseriremo i controlli di validazione veri e propri. Per notificare il messaggio di errore all'utente, la logica che utilizzeremo sarà quella di "iniettare" una porzione di HTML dopo il campo di input. Andremo inoltre ad creare una variabile di controllo degli errori. In questo modo al submit del form la validazione avverrà su tutti i campi e non uno alla volta.

function PreSaveItem(){
var err = false;
var email = $("input[title='E-mail']");
var cf = $("input[title='Codice Fiscale']");

var re_email = /^[0-9a-zA-Z]+([0-9a-zA-Z]*[-._+])*[0-9a-zA-Z]+@[0-9a-zA-Z]+([-.][0-9a-zA-Z]+)*([0-9a-zA-Z]*[.])[a-zA-Z]{2,6}$​/;
var re_cf = /^([A-Za-z]{6}[0-9lmnpqrstuvLMNPQRSTUV]{2}[abcdehlmprstABCDEHLMPRST]{1}[0-9lmnpqrstuvLMNPQRSTUV]{2}[A-Za-z]{1}[0-9lmnpqrstuvLMNPQRSTUV]{3}[A-Za-z]{1})|([0-9]{11})$/;
if (!(re_email.test(email.val())) || email.val().length == 0){
var erremail = '<div class="ms-formvalidation"><span role="alert">Attenzione, il campo <b>E-mail</b> non è valido.</span></div>';
email.after(erremail);
email.focus();
err = true;
}
if (!(re_cf.test(cf.val())) || cf.val().length == 0){
var errcf = '<div class="ms-formvalidation"><span role="alert">Attenzione, il campo <b>Codice Fiscale</b> non è valido.</span></div>';
cf.after(errcf);
cf.focus();
err = true;
}
return !(err)
}

A questo punto è fatta. C'è ancora però una piccola "finezza" che vogliamo implementare per migliorare l'aspetto generale del form. Si tratta di inserire una riga di script per fare in modo che al cambio di valore di ogni campo venga "resettato" il messaggio di errore, se presente.

$(document).ready(function(){
$("input[title='E-mail'], input[title='Codice Fiscale']").change(function(){
$(this).next().hide();
});
});

Abbiamo così inserito un controllo di validazione client side ad un list form SharePoint.

Sample

Tags


Destinatari


Prodotti

SharePoint Server 2013


Bookmark and Share