jQuery: come associare i messaggi di errore della validazione dei form in AJAX ai rispettivi campi

jQuery: come associare i messaggi di errore della validazione dei form in AJAX ai rispettivi campi

In jQuery possiamo associare i messaggi di errore della validazione dei form in AJAX ai loro campi.

In PHP possiamo restituire gli errori di validazione come output JSON creando un array associativo di messaggi di errore in cui salveremo per ciascuna voce il selettore del campo e il relativo messaggio.


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

extract($_POST);

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

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

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

if(count($errors) > 0) {
    $output['errors'] = $errors;
} else {
    $output['success'] = true;
}

echo json_encode($output);
exit;

Con jQuery iteriamo sull'array errors e inseriamo il messaggio di errore dopo il campo selezionato tramite la proprietà param che in questo caso corrisponde all'attributo name. Se c'è un solo form sulla pagina si può utilizzare anche l'attributo id del campo.


$( "#form" ).on( "submit", function( e ) {
    e.preventDefault();
    var $form = $( this );

    $form.find( ".alert" ).remove();

    $.post( "/contact", $form.serialize(), function( resp ) {
        if( resp.errors ) {
            $.each( resp.errors, function( i, err ) {
                $( "[name=" + err.param + "]", $form ).after( '<p class="alert alert-danger">' + err.msg + '</p>' );
            });
        } else {
            console.log( resp );
        }
    });
});
Torna su