jQuery per prevenire campi vuoti nei Web Forms

Categoria: Forms | Livello: Beginner | Tags: forms, html5, jquery
Scritto da il . Ultimo aggiornamento: 2014-05-04
Come realizzare un semplice form in html5 e php con un campo di input di tipo testo.

Form2 è un esempio di Form realizzato in HTML5 che mostra come utilizzare jQuery per validare il web form in modo da prevenire i campi vuoti.

Free Download HTML5 Forms - Form2
Scarica Gratis il Form 2 (HTML5 + jQuery + CSS + PHP)
oppure apri il form per testarlo al volo

1. Download dei file di esempio

Il pacchetto in formato compresso ZIP contiene il file HTML con il codice del web form più altri 3 file: il javascript per la validazione, il foglio di stile e il PHP per l'invio via email delle informazioni raccolte. Il form è perfettamente funzionante e richiede soltanto di essere integrato secondo le esigenze.

Titolo Form2: validazione campi obbligatori con jQuery
Release 0.1.0 del 2014-04-22
Descrizione Codice di esempio per la validazione lato client dei campi obbligatori di un Web Form in HTML5. Include codice HTML, jQuery, CSS e PHP.
Linguaggi HTML5, jQuery, CSS3, PHP
Contenuto Scripts. Files: form.html, valida.js, stile.css, invia.php
Anteprima web-forms-jquery-required.jpg.
Download form2v0_1_0.zip
Data Pubblicato per la prima volta il 2014-04-22
Lingua it-IT
Autore
Licenza Licenza Creative Commons Attribuzione - Condividi allo stesso modo 3.0 Italia (CC BY-SA 3.0 IT)

2. Il codice del web form nella pagina html

Nell'esempio presentato in questa pagina (clic per testare il form) la coppia di tag form racchiude tutto l'html del web form, ma questo non è indispensabile in quanto la specifica prevede che vi possano essere elementi del form al di fuori della coppia di tag e richiamati attraverso l'attributo form. Ecco il codice di esempio di un campo di inupt di tipo testo posizionato all'esterno della coppia di tag form:

<input type="text" name="ruolo" id="ruolo" form="webform">

Nel caso del codice qui sopra il campo ruolo fa parte del form webform in virtù di form="webform".

Fatta questa precisazione guardiamo il codice del web form di esempio, che è veramente semplicissimo: presenta due soli campi di tipo testo, il primo per inserire un nome e il secondo per inserire un indirizzo email. Si tratta quindi del classico form di registrazione veloce:

<form method="post" id="webform" action="invia-email.php">
    <h1>Iscriviti gratis</h1>
    <div class="campo-input">
        <label for="nome">Nome</label>
        <input type="text" name="nome" id="nome" class="required">
    </div>
    <div class="campo-input">
        <label for="email">Email</label>
        <input type="text" name="email" id="email" class="required email">
    </div>
    <div class="btn-azione">
        <button class="submit-btn">Iscrivimi</button>
    </div>
</form>

La prima riga di codice racchiude le istruzioni per fare funzionare il web form (si vede il file php che viene chiamato). Seguono poi un titolo h1 (se utilizzate il form come elemento di una pagina è probabile che dobbiate usare un titolo gerarchicamente inferiore come h2 o h3), le due coppie di input type text con le relative etichette e, infine, il pulsante per iscriversi.

3. Il foglio di stile

Il nostro form ha dimensioni fisse (240 px di larghezza) ed è dotato di padding e margine. Attenzione a questo punto: la pagina in cui è inserito il web form è semi-responsive, ma il form non è responsive!

Se guardiamo l'html notiamo che i tre elementi sono stati inseriti in div caratterizzati da classi: campo-input per le due coppie di input text con label e btn-azione per il pulsante. Queste classi potrebbero essere richiamate sia nel CSS sia nel JavaScript.

Una nota di design e usabilità: l'uso di background-color definito per form, form input, form input hover e focus, submit-btn.

La classe error-data è relativa a un div che viene aggiunto via jQuery in caso di mancata validazione: così in caso di errore viene suggerito all'utente come compilare correttamente il modulo.

form {
    width: 240px;
    padding: 20px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 10px auto auto auto;
    color: #333;
    border: solid 2px #555;
}
form h1 {
    text-align: center;
    margin-top: 0.25em;
}
form label {
    font-size: 14px;
    line-height: 24px;
    width: 40px;
    display: inline-block;
    text-align: right;
}
.campo-input {
    clear: both;
    margin-bottom: 30px;
    position: relative;
}
form input {
    height: 24px;
    width: 172px;
    margin-left: 10px;
    padding-left: 10px;
    background-color: #eee;
    border: solid 1px #666;
}
form input:hover {
    background-color: #ddd;
}
form input:focus {
    background-color: #fff;
}
.btn-azione {
    text-align: right;
}
.submit-btn {
    background-color: #666;
    border: solid 1px #111;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    cursor: pointer;
}
.error-data {
    color: red;
    font-size: 12px;
    position: absolute;
    bottom: -18px;
    left: 30%;
}

4. Il file JavaScript per la validazione con jQuery

Per validare il nostro web form con jQuery dobbiamo includere due file nella pagina del form:

  1. Una versione valida di jquery.min.
  2. Un secondo file che chiameremo validazione.js, con istruzioni personalizzate.

Entrambi i file si includono inserendo le relative istruzioni tra i tag head della pagina che include il form. Il jquery.min può essere scaricato dalla pagina download del sito jQuery e portato sul proprio spazio web (è la soluzione scelta nell'esempio) oppure può essere linkato da una CDN. Entrambe le soluzioni sono valide, ma più spesso si preferisce farlo scaricare dalla CDN.

4.1. Il jQuery.min sul propio spazio web

L'istruzione nell'head della pagina che include il form si presenta come nell'esempio, cioè così

<script src="jquery-1.11.0.min.js"></script>

Se vuoi lasciare l'head così com'è nella pagina di esempio, scarica la tua versione di jQuery.min e copiala nella directory in cui terrai gli altri file del form. Se non sai quale file scaricare dal sito jQuery ti tolgo dall'imbarazzo della scelta: fai clic qui per scaricare il jquery-1.11.0.min.js.

4.2. Il jQuery.min scaricato dalla CDN

Questa è una soluzione alternativa a quella vista sopra: invece di scaricare il file e portarlo sul proprio spazio web è sufficiente modificare l'istruzione nell'head in questa modo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

4.3. Il file validazione.js

Bastano poche istruzioni in jQuery per non inviare il messaggio via email qualora i campi obbligatori non siano stati compilati. Queste istruzioni vanno inserite in un file validazione.js che viene richiamato con la solita riga inserita nell'head della pagina del form:

<script src="validazione.js"></script>

Il codice di validazione.js è riportato sotto, commentiamolo brevemente.

Al clic (submit-btn) tramite il ciclo for vengono analizzati tutti i campi di input alla ricerca di quelli che presentano la classe required; se il campo di input presenta la classe required e se lo stesso non ha superato la validazione (funzione validateRequired) allora viene richiamata la funzione addErrorData, che ha il compito di aggiungere l'elemento div con classe error-data, che è il div che contiene il suggerimento "Compila questo campo".

$(function(){
    $('.submit-btn').click(function(event){
        event.preventDefault();
        var inputs = $('input');
        var isError = false;
        $('.error-data').remove();
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            if ($(input).hasClass('required') && !validateRequired($(input).val())) {
                addErrorData($(input), "Compila questo campo");
                isError = true;
            }
        }
        if (isError === false) {
            $('#webform').submit();
        }
    });
});
function validateRequired(value) {
    if (value == "") return false;
    return true;
}
function addErrorData(element, error) {
    element.after("<div class='error-data'>" + error + "</div>");
}

L'evento che scatena la validazione è il clic sul pulsante Iscrivimi.

5. Il file PHP per l'invio dei dati via email

Il codice PHP è analogo a quello già descritto in Form1 - Esempio di form con input type text.

<?php
    $mailto = 'tua@email.com'; // Email del ricevente
    $subject = 'Nuova iscrizione'; // Titolo del messaggio di posta
    $error_message = 'Oooops! Regstrazione non riuscita.'; // Messaggio di errore
    $success_message = 'Registrazione effettuata con successo!'; // Messaggio di invio riuscito
    $nome = stripcslashes($_POST['nome']);
    $email = stripcslashes($_POST['email']);
    $message = "Nuova registrazione di: " . $nome ."\r\n"; // Prima riga del messaggio di posta
    $message .= "Email: " . $email; // Seconda riga del messaggio di posta
    $headers = "Da: " . "X-Mailer: PHP/" . phpversion(); // Email del mittente (in questo caso il server)
    if (mail($mailto, $subject, $message, $headers)) {
        die($success_message);
    } else {
        die($error_message);
    }
?>
Free Download HTML5 Forms - Form2
Scarica Gratis il Form 2 (HTML5 + jQuery + CSS + PHP)
oppure apri il form per testarlo al volo

Francesco D'Agostino | Twitter (@webbalo) | Google+ | Facebook