驗證在jQuery中無法正常工作

Question

我只是用一個按鈕創建了一個簡單的輸入字段，並為此添加了驗證。當我單擊不帶值的apply按鈕時，它應該顯示錯誤框，並且不應該進入if(ack)條件。

在我的代碼中顯示了錯誤框，但之后它進入了if(ack)方法甚至沒有值。我做錯了什么？

 function applyLeave() { debugger var ack = true $('.required').each(function() { if ($(this).val() == '') { $(this).addClass('inputBorder') var ack = false } }) if (ack) { var newLeaveDetails = {}; newLeaveDetails = { a: $('#levType').val(), b: $('#levFrom').val(), c: $('#levTo').val(), d: $('#levDuration').val(), e: $('#uploadDoc').files[0], g: $('#LevReason').val(), } console.log(newLeaveDetails) var ajaxObj = JSON.stringify({ LeaveDetails: newLeaveDetails }); console.log(ajaxObj) $.ajax({ type: 'POST', url: '', async: true, data: ajaxObj, contentType: 'application/json', success: function() { $(".success").html("Leave applied successfully!"); $('.success').show(); window.setTimeout(function() { window.location.href = '/leave/employeeleavelist' }, 1000); }, error: function() { alert("Try Again") } }) } } 

 .inputBorder { border-color: red !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="row border" id="applyLeave"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Leave Type<span class="requiredField">*</span></label> <select type="text" id="levType" class="col-xs-12 form-control required"></select> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Available/Taken</label> <input type="text" id="levTaken" class="col-xs-12 form-control levTaken" readonly="readonly"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date From<span class="requiredField">*</span></label> <input type="date" id="levFrom" class="col-xs-12 form-control levFrom required"> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date To<span class="requiredField">*</span></label> <input type="date" id="levTo" class="col-xs-12 form-control levTo required"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Duration(Days)</label> <input type="text" id="levDuration" class="col-xs-12 form-control levDuration" readonly="readonly"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Supporting Document</label> <input type="file" class="form-control col-lg-2 col-md-2 col-sm-2" id="uploadDoc"> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> <label class="col-xs-12">Reason<span class="requiredField">*</span></label> <textarea id="LevReason" class="col-xs-12 form-control addCc required" rows="2"></textarea> </div> </div> <div class="row pull-right btnMarginTop"> <button class="btn btn-primary applyLevBtn" onclick="applyLeave()">Apply</button> </div> </section> 

Answer 1

在每個函數內部將var ack更改為ack 。全局ack不能替換為each()函數ack因為您聲明這兩個變量都是新變量。

 function applyLeave() {debugger var ack = true $('.required').each(function () { if ($(this).val() == "") { $(this).addClass('inputBorder') ack = false } }) if (ack) { var newLeaveDetails = {}; newLeaveDetails = { a: $('#levType').val(), b: $('#levFrom').val(), c: $('#levTo').val(), d: $('#levDuration').val(), e:$('#uploadDoc').files[0], g: $('#LevReason').val(), } console.log(newLeaveDetails) var ajaxObj = JSON.stringify({ LeaveDetails: newLeaveDetails }); console.log(ajaxObj) $.ajax({ type: 'POST', url: '', async: true, data: ajaxObj, contentType: 'application/json', success: function () { $(".success").html("Leave applied successfully!"); $('.success').show(); window.setTimeout(function () { window.location.href = '/leave/employeeleavelist' }, 1000); }, error: function () { alert("Try Again") } }) } } 

 .inputBorder{ border-color: red !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="row border" id="applyLeave"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Leave Type<span class="requiredField">*</span></label> <select type="text" id="levType" class="col-xs-12 form-control required"></select> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Available/Taken</label> <input type="text" id="levTaken" class="col-xs-12 form-control levTaken" readonly="readonly"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date From<span class="requiredField">*</span></label> <input type="date" id="levFrom" class="col-xs-12 form-control levFrom required"> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date To<span class="requiredField">*</span></label> <input type="date" id="levTo" class="col-xs-12 form-control levTo required"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Duration(Days)</label> <input type="text" id="levDuration" class="col-xs-12 form-control levDuration" readonly="readonly"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Supporting Document</label> <input type="file" class="form-control col-lg-2 col-md-2 col-sm-2" id="uploadDoc"> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> <label class="col-xs-12">Reason<span class="requiredField">*</span></label> <textarea id="LevReason" class="col-xs-12 form-control addCc required" rows="2"></textarea> </div> </div> <div class="row pull-right btnMarginTop"> <button class="btn btn-primary applyLevBtn" onclick="applyLeave()">Apply</button> </div> </section> 

Answer 2

在您的代碼中，您將'ack'變量聲明為兩個位置，一個是方法級別，另一個是每個函數的局部變量，並且您正在檢查方法級別'ack'變量的條件，該值始終為true。這就是為什么'if'塊的原因正在執行。

var ack = true
$('.required').each(function () {

     if ($(this).val() == "") {
         $(this).addClass('inputBorder')
         var ack = false
     }
})

解決方案，您需要將var符號刪除到本地變量中，如下所示

var ack = true
$('.required').each(function () {

     if ($(this).val() == "") {
         $(this).addClass('inputBorder')
         ack = false
     }
})