0

Tenho esse código que faz validação a um formulário se tem campos vázios senão tiver ele faz o submit do formulário:

$("#btnAdd").click(function (e) {

    e.preventDefault();

    var erros = 0;

    $("#formAdd input").each(function () {

        $(this).val() == "" ? erros++ : "";

    });
    $("#formAdd textarea").each(function () {

        $(this).val() == "" ? erros++ : "";

    });

    if (erros > 0) {

        $("#msg").show().fadeIn(500).delay(1500).fadeOut(600);

    } else {
        $(this).submit(function () {
            var form = $(this);
            var dados = new FormData($(this)[0]);
            $("#btnAdd").prop("disabled", true);
            $.ajax({
                url: 'u/add',
                cache: false,
                contentType: false,
                processData: false,
                data: dados,
                type: 'post'
            }).done(function (data) {
                fetchUser();
                alert("Dados Salvos com Sucesso");
                console.log("STATUS : ", data);
                $("#btnAdd").prop("disabled", false);
                $('#modalAddfoto').modal('hide');
                $('.addfoto')[0].reset();
            }).fail(function (jqXHR, textStatus) {
                console.log("Request failed: " + textStatus);
                $("#btnAdd").prop("disabled", false);
            });
            return false;

        });
    }

});

ele válida normal porém não está entrando nessa parte do código: $(this).submit(function () { ... }

Detalhe, se eu tirar a validação e fazer $('#formAdd').submit(function () { ... } funciona normalmente.

5
  • this nesse contexto está referenciando o #btnAdd e não o form Commented 27/11/2018 às 11:49
  • o this não está referenciando o form Commented 27/11/2018 às 11:49
  • Se eu colocar #formAdd que é o formulário também não funciona.
    – JB_
    Commented 27/11/2018 às 11:51
  • ele chega a entrar no else? Commented 27/11/2018 às 11:55
  • Entra normal no else.
    – JB_
    Commented 27/11/2018 às 11:56

3 Respostas 3

1

Você pode vincular o evento de submit diretamente no form, podendo passar o this dele como parâmetro (já fazendo uma referencia ao Angular).

<form onsubmit="qualquerEvento(this)">
    <button type="submit">Enviar dados</ button>
</ form>

<script>
    qualquerEvento(e) { // 'e' agora será o form

        // evitando o comportamento padrão
        e.preventDefault();

        // faz as validações dos campos

        // faz o ajax para o servidor
    }
</ script>

Vale lembrar que o HTML 5 ele não permite que certos tipos de input sejam enviados com valores nulos, podendo facilitar ainda mais a escrita do código na hora da validação.

0

No seu caso, o this se refere ao botão clicado. Um botão não tem a ação submit, ele pode chamar o submit do form, mas não tem como invocar $(this).submit() no botão.

Use $(this.closest('form')).submit() para recuperar seu form e então invocar o submit.

3
  • Assim também não funcionou: $(this.closest('form')).submit() Se eu colocar também #formAdd não funciona. Parace que dentro do elese dessa forma não funciona. Eu testei para ver se está chegando no else colocando um alert('cheguei') ele exibe o alerta com as validações ok.
    – JB_
    Commented 27/11/2018 às 11:56
  • Certo, se você passar uma função dentro do submit, você está definindo um evento para ser chamado no onSubmit, não invocando o onSubmit em si. Se é isso o que você quer, não há porque usar $().submit, simplesmente invoque o $.ajax diretamente no else.
    – user132397
    Commented 27/11/2018 às 11:59
  • Certo, eu preciso enviar o formulário via ajax se os campos estiverem preenchidos. Eu tentei invocando diretamente o ajax, porém não salva no banco ou seja parace que ele não dar submit no form.
    – JB_
    Commented 27/11/2018 às 12:06
0

Se o #btnAdd for um type="submit" do form, você pode fazer algo como:

$(function(){


    $('#formAdd').submit(function(e){

        var erros = 0;

        $("#formAdd input").each(function () {
            $(this).val() == "" ? erros++ : "";
        });
        $("#formAdd textarea").each(function () {
            $(this).val() == "" ? erros++ : "";
        });

        if (erros > 0) {
            $("#msg").show().fadeIn(500).delay(1500).fadeOut(600);
        } else {
            var form = $(this);
            var dados = new FormData($(this)[0]);

            $("#btnAdd").prop("disabled", true);
            $.ajax({
                url: 'u/add',
                cache: false,
                contentType: false,
                processData: false,

                data: dados, 
                //OU: data: form.serialize(),

                type: 'post'
            }).done(function (data) {
                fetchUser();
                alert("Dados Salvos com Sucesso");
                console.log("STATUS : ", data);
                $("#btnAdd").prop("disabled", false);
                $('#modalAddfoto').modal('hide');
                $('.addfoto')[0].reset();
            }).fail(function (jqXHR, textStatus) {
                console.log("Request failed: " + textStatus);
                $("#btnAdd").prop("disabled", false);
            });
        }
        e.preventDefault();
    });


});
2
  • Ele no caso é do tipo button. No caso do tipo button como ficaria?
    – JB_
    Commented 4/12/2018 às 20:40
  • Tipo button ficaria: //Chamando click: $('#yourButtonId').click(function(){ //Chamando submit do form: $('#formAdd').submit(); }); Commented 6/12/2018 às 9:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .