Gestión de Entidades en la DPE (parte 4)

En este post vamos a revisar cómo enviar a guardar el formulario.

• Enviar el formulario vía POST usando Ajax:

$('#form-entidad').submit(function(event) {
        event.preventDefault();  // Evitar que el formulario se envíe de forma convencional

        let csrfToken = $('input[name="csrfmiddlewaretoken"]').val();

        // Obtener los datos del formulario
        let formData = new FormData($(this)[0]);

        // Agregar el token CSRF a los datos del formulario
        formData.append('csrfmiddlewaretoken', csrfToken);

        // Enviar los datos al servidor mediante AJAX
        $.ajax({
            url: '/',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert('El registro de la entidad se procesó exitosamente.');
            },
            error: function(xhr, textStatus, errorThrown) {
                console.error('Error al enviar el formulario:', errorThrown);                
            }
        });
});

Como del lado del servidor pueden venir errores de validación, esos mensajes se manejarán y presentarán como 'invalid-feedback' en el campo correspondiente. Para ello se debe refactorizar la función de manejo de error en la petición ajax:

error: function(xhr, textStatus, errorThrown) {
    console.error('Error al enviar el formulario:', errorThrown);

    if (xhr.responseJSON) {
        let errores = JSON.parse(xhr.responseJSON.msg_error); // Obtener el JSON de errores de validación

        // Iterar sobre los mensajes de error y agregarlos a los elementos HTML correspondientes
        $.each(errores, function(campo, detalles) {

            let mensajesError = ''; // Inicializar la cadena de mensajes de error
            // Iterar sobre cada detalle de error para concatenar los mensajes
            $.each(detalles, function(index, detalle) {
                mensajesError += detalle.message + '<br>'; // Concatenar el mensaje de error con un <br>
            });

            let $campoInput = $('[name="' + campo + '"]'); // Seleccionar el elemento de formulario por su atributo name                        
            // Agregar el mensaje de error al elemento de formulario
            $campoInput.addClass('is-invalid'); // Marcar el campo como inválido
            $campoInput.next('.invalid-feedback').html(mensajesError); // Agregar el mensaje de error
        });
    } else {
        console.error('La respuesta no es un JSON de errores.'); // Manejar el caso en que la respuesta no sea un JSON
    }
}

El manejo del reset del fomulario debe considerar remover las clases 'is-invalid' y 'was-validated' de los inputs y del formulario, respectivamente:

$('#form-entidad').on('reset', function(event) {
    $(this).find('select, input').removeClass('is-invalid');
    $(this).removeClass('was-validated');
});