Give form submit with empty field validations

Question

Give form submit with empty field validations

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have this code that does validation to a form if it has fields fields if it does not have it submit form:

$("#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 is valid normal but is not entering this part of the code: $(this).submit(function () { ... }

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

javascript jquery

asked by anonymous 27.11.2018 / 12:37

3 answers

Python setar String where the cursor is [closed] Compare existence of record with date and future date

score 1 · Answer 1

You can link the submit event directly to the form, you can pass this as a 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>

It is worth remembering that HTML 5 does not allow certain types of input to be sent with null values, which can make it even easier to write code at the time of validation.

score 0 · Answer 2

In your case, this refers to the clicked button. A button does not have the submit action, it can call the form submit, but can not invoke $(this).submit() on the button.

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

score 0 · Answer 3

If #btnAdd is a type="submit" of the 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();
    });


});