Give form Ubmit with empty field validations

Question

I have this code that validates a form if it has several fields but it does the form Submit:

$("#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;

        });
    }

});

it valid normal but is not entering this part of the code: $(this).submit(function () { ... }

Detail, if I take the validation and do $('#formAdd').submit(function () { ... } works normally.

Answer 1

You can link the Submit event directly in the form and pass this as its parameter (already making a reference to the 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>

Remember that HTML 5 does not allow certain types of input to be sent with null values, being able to make it even easier to write the code at the time of validation.

Answer 2

In your case, the this refers to the button clicked. A button doesn’t have the action submit, it can call the form Submit, but it has no invoking $(this).submit() on the button.

Use $(this.closest('form')).submit() to retrieve your form and then invoke Submit.

Answer 3

If #btnAdd is a type="submit" form, you can do something like:

$(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();
    });


});