根據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：記住我的發送按鈕是不是在我的SE內按鈕nd按鈕有一個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; 
       } 

      });