Mai avuto il problema di validare un form senza dover configurare tutto a mano? Beh se pensi che il browser e HTML5 bastino ahimè non è sempre così.
Per applicare una validazione rapidamente e senza troppi controlli, utilizzeremo un plugin chiamato jQuery Validation scaricabile al sito https://jqueryvalidation.org/ oppure utilizzando i CDN che, ad oggi, raggiungono la versione 1.19.5:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js'></script>
Alla fine del file aggiungiamo l’inizializzazione del form e abbiamo fatto! Aggiungo anche la traduzione, altrimenti basterebbe l’ultimo blocco di codice 😉
<script>
/*
* Translated default messages for the jQuery validation plugin.
* Locale: IT (Italian; Italiano)
*/
$.extend($.validator.messages, {
required: 'Campo obbligatorio.',
remote: 'Controlla questo campo.',
email: 'Inserisci un indirizzo email valido.',
url: 'Inserisci un indirizzo web valido.',
date: 'Inserisci una data valida.',
dateISO: 'Inserisci una data valida (ISO).',
number: 'Inserisci un numero valido.',
digits: 'Inserisci solo numeri.',
creditcard: 'Inserisci un numero di carta di credito valido.',
equalTo: 'Il valore non corrisponde.',
extension: 'Inserisci un valore con un'estensione valida.',
maxlength: $.validator.format('Non inserire più di {0} caratteri.'),
minlength: $.validator.format('Inserisci almeno {0} caratteri.'),
rangelength: $.validator.format('Inserisci un valore compreso tra {0} e {1} caratteri.'),
range: $.validator.format('Inserisci un valore compreso tra {0} e {1}.'),
max: $.validator.format('Inserisci un valore minore o uguale a {0}.'),
min: $.validator.format('Inserisci un valore maggiore o uguale a {0}.'),
nifES: 'Inserisci un NIF valido.',
nieES: 'Inserisci un NIE valido.',
cifES: 'Inserisci un CIF valido.',
currency: 'Inserisci una valuta valida.'
});
$(function () {
// Initialize form validation on the registration form.
$("form").validate();
});
</script>
Da questo momento, i vari “required” / “type=’email'” / minlength /date ecc… verranno controllati in automatico.
Il plugin permette molte più configurazioni specifiche per ogni campo, ma per quello vi rimando alla documentazione ufficiale.
Buon coding!