Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

224
Visualizações
Form validation in Bootstrap with ajax

I want to validate a form with ajax, how could I validate the beforeSend : function(xhr, opts) to continue with success: function (data) , as you can see in that first part I am requiring the data of the inputs if they are empty, I feel like I'm pretty close but there are a few things that I can't get to work quite right. My form is not being sent to the destination email, my php file is correct.

$(document).ready(function () {

    var frm = $('#formulario');

    frm.submit(function (e) {

        e.preventDefault();
        console.log(frm.serialize());

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: new FormData(this),
            processData: false,
            contentType: false,
            beforeSend : function(xhr, opts) {
                if (document.getElementById('nombre').value != "" || 
                    document.getElementById('dni').value != "" || 
                    document.getElementById('correo').value != "" || 
                    document.getElementById('telefono').value != "" || 
                    document.getElementById('fecha').value != "" || 
                    document.getElementById('lugar').value != "" || 
                    document.getElementById('relacion').value != "" || 
                    document.getElementById('detalle').value != "" || 
                    document.getElementById('archivo[]').value != "" )  {
                        frm.addClass('was-validated');
                        console.log("abort");
                        xhr.abort();
                }
            },
        
            success: function (data) {
                var div = document.createElement('div');
                    div.appendChild(document.createTextNode("La denuncia fue enviada con éxito"));
                    div.classList.add('alert', 'alert-success', 'mt-4', 'text-center');
                    document.querySelector('form').appendChild(div);
                    setTimeout(function() {
                        document.querySelector('.alert').remove();
                    }, 5000);

                    document.querySelector('form').reset();
            },

            error: function (data) {
                var div = document.createElement('div');
                    div.appendChild(document.createTextNode("¡La denuncia no pudo ser enviada, por favor intente nuevamente!"));
                    div.classList.add('alert', 'alert-danger', 'mt-4', 'text-center');
                    document.querySelector('form').appendChild(div);
                    setTimeout(function() {
                        document.querySelector('.alert').remove();
                    }, 5000);
            },
        });
    });
});
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda