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&apos;estensione valida.',
    maxlength: $.validator.format('Non inserire pi&ugrave; 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!