使用 jquery 根据需要验证表单字段时出错

Question

个人需要插入我的表单字段，因为我是通过 jQuery 完成的，但我没有成功，并且在未填充的字段中出现红色边框，如果我的部分代码不起作用表格代码：

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>

OBS：请记住，我的发送按钮不在按钮内 我的发送按钮内有一个 js 文件，该文件通过 ajax 发出请求确实；

发送按钮的JS：

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

您的验证码有效。如果有一些验证错误，您似乎应该阻止发送您的表单。试试这个：

$("#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)
                {
                    return false;
                }

            });