Informazioni

  • Copyright © 2021 Gabriele Romanato
  • Codice fiscale: RMNGRL78L20A485X
  • Privacy Policy

PHP: validazione dei form con AJAX

In questo articolo vedremo come implementare la validazione di un form con PHP e AJAX.

Partiamo da questo semplice form di contatto:

<main>
            <form action="ajax.php" method="post" id="contact-form" novalidate>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email">E-mail</label>
                    <input type="email" name="email" id="email" class="form-control">
                </div>
                <div class="form-group">
                    <label for="subject">Subject</label>
                    <input type="text" name="subject" id="subject" class="form-control">
                </div>
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea name="message" id="message" rows="5" class="form-control"></textarea>
                </div>
                <p class="mt-5">
                    <input type="submit" class="btn btn-primary btn-block" value="Send">
                </p>
            </form>
        </main>

Nella validazione con AJAX PHP dovrà eseguire una normale validazione dei dati, con l'unica differenza che l'output restituito sarà in formato JSON e conterrà un array di oggetti errore nel caso di errori di validazione o un messaggio di avvenuto invio del form.

header('Content-Type: application/json');

$name = trim($_POST['name']);
$subject = trim($_POST['subject']);
$email = trim($_POST['email']);
$message = trim($_POST['message']);

$output = [];
$errors = [];

if(empty($name)) {
   $errors[] = ['param' => 'name', 'msg' => 'Required field.'];
}

if(empty($subject)) {
    $errors[] = ['param' => 'subject', 'msg' => 'Required field.'];
}

if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = ['param' => 'email', 'msg' => 'Invalid e-mail.'];
}

if(empty($message)) {
    $errors[] = ['param' => 'message', 'msg' => 'Required field.'];
}

if(count($errors) > 0) {
    $output['errors'] = $errors;
} else {
    mail('info@phptutorial.it',
        strip_tags($subject),
        strip_tags($message),
        "From: $name <$email>\r\n");
    $output['success'] = 'Message successfully sent.';
}

echo json_encode($output);
exit;

Va subito impostato l'header HTTP che imposta il tipo di contenuto e di output su application/json. Quando l'output è stato restituito, la funzione exit() impedisce che eventuali caratteri aggiuntivi vadano ad invalidare la sintassi del documento JSON.

Ciascun errore è un array associativo che verrà convertito in oggetto dalla funzione json_encode(). param verrà usato dal codice JavaScript per associare il messaggio di errore al relativo campo del form.

Il codice JavaScript nel nostro caso è stato realizzato senza l'ausilio di librerie esterne come jQuery in modo da far comprendere meglio tutti i passaggi.

'use strict';

const serialize = formElement => {
    let query = [];
    for(let element of formElement.elements) {
        if(element.type !== 'submit') {
            query.push(element.name + '=' + element.value);
        }
    }
    return query.join('&');
};

const resetMessages = formElement => {
   const messages = formElement.querySelectorAll('.alert');
   if(messages.length > 0) {
       for(let message of messages) {
           message.remove();
       }
   }
};

const form = document.querySelector('#contact-form');

form.addEventListener('submit', evt => {
    evt.preventDefault();

    const body = serialize(form);
    resetMessages(form);

    fetch(form.getAttribute('action'), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: body
    }).then(response => response.json()).
        then(data => {
            if(data.errors) {
                for(let error of data.errors) {
                    form.querySelector('#' + error.param).insertAdjacentHTML(
                        'afterend',
                        `<div class="alert alert-danger">${error.msg}</div>`
                    );
                }
            } else if(data.success) {
                const msg = document.createElement('div');
                msg.className = 'alert alert-success';
                msg.textContent = data.success;

                form.appendChild(msg);
            }
    });
}, false);

Conclusione

La validazione di un form con AJAX richiede semplicemente che PHP restituisca un output in formato JSON in modo che il codice lato client possa gestire i risultati della validazione.

Precedente Laravel: pagamenti con Stripe Laravel: pagamenti con Stripe
PHP: login con i cookie Successivo PHP: login con i cookie