jQuery validation with ajax does not work

Question

When I click on Ubmit it does not validate the fields, it simply does Ubmit without even having filled in. Does anyone know what can be?

Obs: The form is with id form_redes_social and all fields are with your id and Names correctly.

$(document).ready(function () {
 $("#form_redes_sociais").validate({
    rules: {
        facebook: {
            required: true,
            minlength: 5
        },
        instagram: {
            minlength: 5
        },
        google: {
            minlength: 5
        },
        pinterest: {
            minlength: 5
        },
        twitter: {
            minlength: 5
        },
        youtube: {
            minlength: 5
        }
    },
    submitHandler: function () {
        dados = $('#form_redes_sociais').serialize();
        alterarLinks(dados);
    }
});

     function alterarLinks(dados) {
    $.ajax({
        url: path + 'administrador/alterarLinks',
        type: 'POST',
        data: {'dados': dados},
        beforeSend: function () {
            exibeCarregando();
        },
        complete: function () {
            removeCarregando();
        },
        success: function (response) {
            if (parseInt(response) === 1) {
                $(".dados-alterados").show(1000);
                setTimeout(function () {
                    $(".dados-alterados").fadeOut(1000);
                }, 5000);
            } else {
                console.log("Ocorreu um erro");
            }
        },
        error: function (erro, er) {
            console.log(erro, er);
        }
    });
}

});

HTML

<form id="form_redes_sociais" class="form-horizontal form-bordered">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="inputDefault">Facebook</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="facebook" name="facebook" placeholder="EX: https://facebook.com/seuusuario">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="inputDefault">Instagram</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="instagram" name="instagram" placeholder="Ex: https://instagram.com/seuusuario">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="inputDefault">Google+</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="google" name="google" placeholder="EX: https://plus.google.com/seuusuario">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="inputDefault">Pinterest</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="piterest" name="pinterest" placeholder="EX: https://pinterest.com/seuusuario">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="inputDefault">Twitter</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="twitter" name="twitter" placeholder="EX: https://twitter.com/seuusuario">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="inputDefault">Youtube</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="youtube" name="youtube" placeholder="EX: https://youtube/seucanal">
                        </div>
                    </div>

                    <p class="text-center">
                        <br />
                        <button class="mb-xs mt-xs mr-xs btn btn-primary" type="submit"> Atualizar <i class="fa fa-check"></i></button>
                    </p>
                </form>

Answer 1

The jQuery validate has a function where, before submitting the form you check if it is valid. See the following code:

//Guarda o form em uma variável
var form = $("#form_redes_sociais");

$("#form_redes_sociais").validate({
    //Aqui você deve mudar os valores, para os que você deseja validar, coloquei dados fakes para você poder visualizar
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        },
        tel: {
            required: true
        }
    },
    messages: {
        name: "Favor preencher seu nome",
        email: {
            required: "Favor preencher seu e-mail",
            email: "Favor preencher com um e-mail válido"
        },
        tel: {
            required: "Favor preencher seu e-mail"
        }
    }
});

function sendForm() {
    if (form.valid()) {
        var data = $("#form_redes_sociais").serializeArray();
        $.ajax({
            type: "POST",
            url: "SUA URL AQUI",
            data: data,
            dataType: "json",
            success: function(result) {
                if (result.status == "OK") {
                    //código caso dê certo
                } else {
                    //código caso dê errado
                }
            }
        });
        return false;
    }
}

In this link, explains about this function: https://jqueryvalidation.org/valid/