Problem validating form fields as mandatory

Question

staff needed to enter the fields of my form as required I did this via jQuery however I did not succeed the idea and get a red border in the fields that were not filled my code does not work dry part of my form code:

HTML:

<form class="form" id="form">
                                    <div class="form-group row">
                                        <div class="col-md-12">
                                            <input type="text" name="name" class="form-control" id="name"
                                                   placeholder="NOME COMPLETO" required/>
                                        </div>
                                    </div>
                                    <div class="form-group row -inputs">
                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="birthday" class="form-control" id="data-mask"
                                                   placeholder="DATA DE NASCIMENTO" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="rg" class="form-control" id="rg-mask"
                                                   placeholder="RG" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="cpf" class="form-control" id="cpf-mask"
                                                   placeholder="CPF" required/>
                                        </div>
                                    </div>

                                    <div class="form-group row -inputs">
                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="email" class="form-control" id="mail"
                                                   placeholder="E-MAIL" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="phone" class="form-control" id="phone-mask"
                                                   placeholder="TELEFONE" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="cellphone" class="form-control" id="cel-mask"
                                                   placeholder="CELULAR" required/>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="col-sm-12">
                                            <input type="text" name="address" class="form-control" id="address"
                                                   placeholder="ENDEREÇO COMPLETO" required/>
                                        </div>
                                    </div>

                                    <div class="form-group row -inputs">
                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="city" class="form-control" id="city"
                                                   placeholder="CIDADE" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="state" class="form-control" id="state"
                                                   placeholder="ESTADO" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="cep" class="form-control" id="cep-mask"
                                                   placeholder="CEP" required/>
                                        </div>
                                    </div>
                                </form>

<div class="border-warranty">
                        <p id="monthly-value"></p>
                        <a href="#" class="btn-warranty btn-indenizometro" id="submit-btn">
                            <img src="{{URL::asset('/img/loading.gif')}}" class="loaderImage" width="25" style="display: none;">
                            Solicitar <br><span><b>meu seguro</b></span><br>
                        </a>
                    </div>

JS:

<script>
        $(document).ready(function(){
            $("input").blur(function(){
                if($(this).val() == "")
                {
                    $(this).css({"border" : "1px solid #F00", "padding": "2px"});
                }
            });
            $("#submit-btn").click(function(){
                var cont = 0;
                $("#form input").each(function(){
                    if($(this).val() == "")
                    {
                        $(this).css({"border" : "1px solid #F00", "padding": "2px"});
                        cont++;
                    }
                });
                if(cont == 0)
                {
                    $("#form").submit();
                }
            });
        });
    </script>

NOTE: Remembering that my send button is not inside the <form> Inside my send button has a js file that makes a request via ajax I believe that this will not give problem more I am putting the code anyway for you to see what this button does;

JS from send button:

$("#submit-btn").click(function (e) {
    e.preventDefault();

    var data = $('form').serializeArray();

    if($(this).hasClass('btn-warranty')) {
        var inputRangeValue = $('.final-value').first().text();
        var specialty_id = {name: 'specialty_id', value: $('#specialty_id').val()};
        var value = {name: 'value', value: inputRangeValue + '000'};
        data.push(specialty_id);
        data.push(value);
    }

    if($(this).hasClass('btn-indenizometro')) {
        var question_1 = $('input[name=question_1]:checked').val();
        var question_2 = $('input[name=question_2]:checked').val();
        var question_3 = $('input[name=question_3]:checked').val();
        //var reason =  {name: 'reason', value: sessionStorage.tipo };
        var monthly = {name: 'monthly', value: $('#monthly-value').text() };

        data.push(question_1);
        data.push(question_2);
        data.push(question_3);
        data.push(monthly);
        //data.push(reason);
    }

    var category = {name: 'category', value: window.location.pathname};
    data.push(category);

    //Ajax post data to server
    $.ajax({
        type: 'POST',
        url: '/request',
        data: data,
        dataType: 'json',
        success: function (data) {
            $('#modal-success').modal('show');
            $('form')[0].reset();
        },
        error: function (data) {
            //console.log(data);
        }
    });
});

Answer 1

ForEach in each input form and check if they are required

$('#form').find('input').each(function(){
   if(!$(this).prop('required')){
     // É required
   } else {
     // Não é required
   }
});

So that with the input it gets red border, you can use jQuery to change the input css, and change the Outline to red color.