Come mostrare messaggi di validazione sui campi di un form di backend

In questo articolo andremo ad implementare una modifica per migliorare la notifica di errori durante la validazione dei dati di un form di backend.

Per impostazione predefinita quando un modello viene salvato e genera errori, viene visualizzato il primo messaggio di errore in un messaggio flash.

Questo comportamento è ottimo per form di piccole dimensioni ma per form di dimensioni più grandi con molte regole di validazione non è il comportamento migliore, un messaggio che ci indica quale sia il campo incriminato faciliterà una sua immediata individuazione.

Per raggiungere il nostro scopo è sufficiente aggiungere un file javascript al nostro plugin, creiamo quindi il file in: plugins/AUTORE/NOME_PLUGIN/assets/js/custom-fields-errors.js e ci inseriamo il seguente codice:

$(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {

    var $formGroup = $(fieldElement).closest('.form-group')

    var $helpBlock = $('<p />').addClass('help-block field-has-error')

    $formGroup.addClass('has-error')

    $helpBlock.text(errorMsg[0])

    $formGroup.append($helpBlock)

    if (isFirst) {
        $('html, body').animate({ scrollTop: $formGroup.offset().top }, 500, function(){

            fieldElement.focus()

        })
    }
})

$(document).on('ajaxPromise', '[data-request]', function() {

    var $form = $(this).closest('form')

    var $helpBlock = $('.field-has-error', $form)

    $helpBlock.remove()

    $form.find('.form-group.has-error').removeClass('has-error');

})

Come si intuisce dal codice verrà aggiunta la classe 'has-error' al contenitore del campo e appeso una paragrafo con le classi 'help-block field-has-error' e inserito in esso il testo del messaggio di errore.

Una volta aggiunte le classi e gli altri elementi del DOM necessari alla visualizzazione degli errori scrolliamo fino al primo campo di errore.

Nella parte successiva rimaniamo in ascolto della prossima chiamata ajax e, nel caso, andiamo a togliere le classi e gli elementi aggiunti precedentemente in modo da pulire la form ed eventualmente ripopolarla con i nuovi messaggi.

Ora tramite il metodo addJs di October andiamo ad includere il file appena creato richiamandolo nel costruttore della classe del controller passandogli come argomento il percorso al file javascript in questo modo:

namespace AUTORE\NOME_PLUGIN\Controllers;

class Books extends Controller
{
    ...

    public function __construct()
    {
        ...

        $this->addJs('/plugins/AUTORE/NOME_PLUGIN/assets/js/custom-fields-errors.js');
    }

}

Questo è tutto, ora i campi che genereranno un errore di validazione avranno il messaggio di errore relativo sotto di loro ed il bordo del campo evidenziato.

Per approfondire l'argomento trovate le indicazioni in questa pagina della documentazione

Happy coding!

Lunga vita e prosperità