Success message with ajax boostrap 4 validation

Question

I have this code that works perfectly. On the page cadastrarFuncionario.php are made an INSERT in the database and an image upload and if successful in the upload has a echo "Upload efetuado com sucesso!"; which is presented in <div id="documento_e"></div> of HTML

$(document).ready(function () {
    // evento de "submit"
    $("#botaoCad").click(function (e) {
        // parar o envio para que possamos faze-lo manualmente.
        e.preventDefault();
        // captura o formulário
        var form = $('#form_funcionario')[0];
        // cria um FormData {Object}
        var data = new FormData(form);
        // processar
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "processosPHP/cadastrarFuncionario.php",
            data: data,
            processData: false, // impedir que o jQuery tranforma a "data" em querystring
            contentType: false, // desabilitar o cabeçalho "Content-Type"
            cache: false, // desabilitar o "cache"
            // manipular o sucesso da requisição
            success: function (data) {
                $("#documento_e").html(data);
            },
            // manipular erros da requisição
            error: function (e) {
                $("#documento_e").html(e);
            }
        });
    });
}); 

I put a boostrap 4 validation on it

    $(document).ready(function () {
        // evento de "submit"
        $("#botaoCad").click(function(event) {
                // Fetch form to apply custom Bootstrap validation
                var form = $("#form_funcionario")

                if (form[0].checkValidity() === false) {
                  event.preventDefault()
                  event.stopPropagation()
                }else{   
                    // cria um FormData {Object}
                    var data = new FormData(form[0]);
                    // processar
                    $.ajax({
                        type: "POST",
                        enctype: 'multipart/form-data',
                        url: "processosPHP/cadastrarFuncionario.php",
                        data: data,
                        processData: false, // impedir que o jQuery tranforma a "data" em querystring
                        contentType: false, // desabilitar o cabeçalho "Content-Type"
                        cache: false, // desabilitar o "cache"
                        // manipular o sucesso da requisição
                        success: function (data) {
                            $("#documento_e").html(data);
                        },
                        // manipular erros da requisição
                        error: function (e) {
                            $("#documento_e").html(e);
                        }
                    });


            }
            form.addClass('was-validated');

        });
    }); 

in this case, both the INSERT and the upload are executed, but the message does not appear Upload efetuado com sucesso! in <div id="documento_e"></div> of HTML

NOTE: The file cadastrarFuncionario.php is exactly the same for both cases.

How a message could be presented in the second case?

Answer 1

The problem, as far as I’m concerned, is that you’re putting the preventDefault() within the if. When your code enters the else the preventDefault() is not triggered, changing the current state and not showing the div with success message. Actually the div is shown, but so quickly that it is not seen because soon after the event changes the current state.

If you do it inside the click, will work normally, as before:

event.preventDefault();
  if (form[0].checkValidity() === false) {
      event.stopPropagation()
    }else{   
        // cria um FormData {Object}
        var data = new FormData(form[0]);
        // processar
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "processosPHP/cadastrarFuncionario.php",
            data: data,
            processData: false, // impedir que o jQuery tranforma a "data" em querystring
            contentType: false, // desabilitar o cabeçalho "Content-Type"
            cache: false, // desabilitar o "cache"
            // manipular o sucesso da requisição
            success: function (data) {
                $("#documento_e").html(data);
            },
            // manipular erros da requisição
            error: function (e) {
                $("#documento_e").html(e);
            }
        });

    }