在jQuery中驗證多個StartTime和EndTime

我有一個屏幕，其中有多個開始時間和結束時間文本框由weekDay.I想使用jQuery下面的規則驗證。在jQuery中驗證多個StartTime和EndTime

開始時間不能大於結束時間更多。
結束時間不能小於開始時間。
下一行的開始時間不能等於或小於上一行的結束時間。
確認應在文本框焦點和最終提交按鈕上觸發。 [對不起，它在圖像中不可見，但假設它在那裏]

注意： - 1.用戶可以從任何位置刪除任何行。 2.用戶可以進行從上到下和從下到上的輸入。他可以在其間留下空行。

我盡我所能做了驗證，因爲我在jQuery方面經驗不足，但如果用戶在兩者之間留有空白行或刪除任何行，則無法正常工作。

任何幫助將不勝感激！

在此先感謝。 - 普什卡Rathod

var isStartTimeError = false; 
 
var isEndTimeError = false; 
 

 
$(document).ready(function() { 
 
    
 
$("#btnSave").click(function (e) { 
 
    if(ValidateOnSave()) 
 
     { 
 
     alert('Perfect !!'); 
 
     } 
 
    }); 
 

 
    \t \t $(".StartTimeSlot").focusout(function() { 
 

 
      var ctrl = $(this).prop('id'); 
 
      var start_time = $("#"+ctrl).val(); 
 
      $("#"+ctrl).removeClass('form-invalid'); 
 
      $("#errorMsg").html(''); 
 

 
      if(start_time != null && start_time != "" && start_time != undefined) 
 
      { 
 
       var ctrls = ctrl.split('_'); 
 

 
       var day = ctrls[1]; 
 

 
       var rank = ctrls[2]; 
 

 
       var validTime = start_time.match(/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/); 
 

 
       if (!validTime) { 
 
        $(this).addClass('form-invalid'); 
 
        $("#errorMsg").html('Enter valid time for ' + day + '.'); 
 
        $('html, body').animate({ scrollTop: 0 }, 'slow'); 
 
        $("#"+ctrl).addClass('form-invalid'); 
 
        return false; 
 
       } 
 

 
       if(parseInt(rank) > 0) 
 
       { 
 
        var end_time = $("#txtEndTime_" + day + "_" + parseInt(rank - 1)).val();      
 

 
        if(end_time != null && end_time != "" && end_time != undefined) 
 
        { 
 
         //convert both time into timestamp 
 
         var stt = new Date("January 24, 1984 " + start_time); 
 
         stt = stt.getTime(); 
 

 
         var endt = new Date("January 24, 1984 " + end_time); 
 
         endt = endt.getTime(); 
 

 
         if(stt <= endt) { 
 
          $("#StartErrorMsg").html('Start time must be bigger than last end time.<br/>'); 
 
          $('html, body').animate({ scrollTop: 0 }, 'slow'); 
 
          $("#"+ctrl).addClass('form-invalid'); 
 
          isStartTimeError = true; 
 
          return false; 
 
         } 
 
         else 
 
         { 
 
          $("#StartErrorMsg").html(''); 
 
          isStartTimeError = false; 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }); 
 

 
     $(".EndTimeSlot").focusout(function() { 
 

 
      var ctrl = $(this).prop('id'); 
 
      var end_time = $("#"+ctrl).val(); 
 
      $("#"+ctrl).removeClass('form-invalid'); 
 
      $("#errorMsg").html(''); 
 

 
      if(end_time != null && end_time != "" && end_time != undefined) 
 
      { 
 
       var ctrls = ctrl.split('_'); 
 

 
       var day = ctrls[1]; 
 

 
       var rank = ctrls[2]; 
 

 
       var validTime = end_time.match(/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/); 
 

 
       if (!validTime) { 
 
        $(this).addClass('form-invalid'); 
 
        $("#errorMsg").html('Enter valid time for ' + day + '.'); 
 
        $('html, body').animate({ scrollTop: 0 }, 'slow'); 
 
        $("#"+ctrl).addClass('form-invalid'); 
 
        return false; 
 
       } 
 

 
       var startCtrl = $("#txtStartTime_" + day + "_" + parseInt(rank)); 
 
       var start_time = startCtrl.val(); 
 

 
       if(start_time != null && start_time != "" && start_time != undefined) 
 
       { 
 
        //convert both time into timestamp 
 
        var stt = new Date("January 24, 1984 " + start_time); 
 
        stt = stt.getTime(); 
 

 
        var endt = new Date("January 24, 1984 " + end_time); 
 
        endt = endt.getTime(); 
 

 
        if(stt >= endt) { 
 
         $("#EndErrorMsg").html('End time must be bigger than start time.<br/>'); 
 
         $('html, body').animate({ scrollTop: 0 }, 'slow'); 
 
         $("#"+ctrl).addClass('form-invalid'); 
 
         isEndTimeError = true; 
 
         return false; 
 
        } 
 
        else 
 
        { 
 
         isEndTimeError = false; 
 
         $("#EndErrorMsg").html(''); 
 
        } 
 
       } 
 
       else 
 
       { 
 
        $("#EndErrorMsg").html('Start time cannot be empty.<br/>'); 
 
        $('html, body').animate({ scrollTop: 0 }, 'slow'); 
 
        $(startCtrl).addClass('form-invalid'); 
 
        isEndTimeError = true; 
 
        return false; 
 
       } 
 
      } 
 
     }); 
 
    
 

 
}); 
 
    
 
function ValidateOnSave() { 
 
     
 
     var days = new Array("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"); 
 

 
     var timeStampFlag = true; 
 
     var message = ''; 
 

 
     var isRecordFlag = true; 
 

 
     for (var i = 0; i < days.length; i++) { 
 
      var dayFlag = false; 
 
      $("#div" + days[i]).find('.StartTimeSlot').each(function (ctrl) {     
 
       if ($(this).val() != '') { 
 
        var validTime = $(this).val().match(/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/); 
 
        if (!validTime) { 
 
         $(this).addClass('form-invalid'); 
 
         timeStampFlag = false; 
 
         dayFlag = true; 
 
        } 
 
       } 
 
      }); 
 

 
      $("#div" + days[i]).find('.EndTimeSlot').each(function (ctrl) { 
 
       if ($(this).val() != '') { 
 
        var validTime = $(this).val().match(/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/); 
 
        if (!validTime) { 
 
         $(this).addClass('form-invalid'); 
 
         timeStampFlag = false; 
 
         dayFlag = true; 
 
        } 
 
       } 
 
      }); 
 

 
      if (dayFlag) 
 
       message += ' Enter valid time for ' + days[i] + '. <br/> '; 
 
     } 
 

 
     //check all the controls 
 
     var isAllEmpty = false; 
 
     for (var i = 0; i < days.length; i++) { 
 
      var dayFlag = false; 
 
      $("#div" + days[i]).find('.StartTimeSlot').each(function (ctrl) { 
 
       var timeSlotId = $(this).prop('id'); 
 
       var t1Id = timeSlotId.replace('txtStartTime', 'txtEndTime'); 
 
       var t2Id = timeSlotId.replace('txtStartTime', 'txtMinChild'); 
 

 
       if (!($(this).val() == "" || (($("#" + t1Id).val() == "")))) { 
 
        isAllEmpty = true; 
 
       } 
 
      }); 
 
     } 
 

 
     if (!isAllEmpty) { 
 
      message += ' Enter atleast one setup details. <br/> '; 
 
      timeStampFlag = false; 
 
     } 
 

 
     $("#errorMsg").html(message); 
 
     $('html, body').animate({ scrollTop: 0 }, 'slow');   
 
    
 
    return timeStampFlag; 
 
    
 
    } 
 

 

 
$(document).on("click", ".trash", function (event) { 
 
     event.preventDefault(); 
 
     
 
     var deleteId = $(this).attr("id"); 
 

 
     var idArray = deleteId.split('_'); 
 

 
     var idFirstElem = idArray[1]; 
 
     var idSecondElem = idArray[2]; 
 
     var divToDel = "rowId" + "_" + idFirstElem + "_"+ idSecondElem; 
 
     $("#" + divToDel).remove(); 
 
    });

.form-invalid { 
 
    border: 1px solid red; 
 
} 
 

 
.errmessage { 
 
    color: red; 
 
    font-size: 13px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span id="StartErrorMsg" class="errmessage" ></span> 
 
    <span id="EndErrorMsg" class="errmessage" ></span> 
 
    <span id="errorMsg" class="errmessage" ></span> 
 
</div> 
 
<div id="divMonday" class="Monday" > 
 
\t <div id="rowId_Monday_0"> 
 
\t \t <input class="StartTimeSlot" type="text" id="txtStartTime_Monday_0" name="txtStartTime_Monday_0" value="08:00 AM" /> 
 
\t \t <input class="EndTimeSlot" type="text" id="txtEndTime_Monday_0" name="txtEndTime_Monday_0" value="08:30 AM" /> 
 
\t \t <a title="Delete" id="rowIdIcon_Monday_0" onclick="" href="#" class="trash" >Delete</a>  
 
\t </div> \t 
 
\t <div id="rowId_Monday_1"> 
 
\t \t <input class="StartTimeSlot" type="text" id="txtStartTime_Monday_1" name="txtStartTime_Monday_1" value="09:00 AM" /> 
 
\t \t <input class="EndTimeSlot" type="text" id="txtEndTime_Monday_1" name="txtEndTime_Monday_1" value="09:30 AM" /> 
 
\t \t <a title="Delete" id="rowIdIcon_Monday_1" onclick="" href="#" class="trash">Delete</a>  
 
\t </div> 
 
\t <div id="rowId_Monday_2"> 
 
\t \t <input class="StartTimeSlot" type="text" id="txtStartTime_Monday_2" name="txtStartTime_Monday_2" value="10:00 AM" /> 
 
\t \t <input class="EndTimeSlot" type="text" id="txtEndTime_Monday_2" name="txtEndTime_Monday_2" value="10:30 AM" /> 
 
\t \t <a title="Delete" id="rowIdIcon_Monday_2" onclick="" href="#" class="trash">Delete</a>  
 
\t </div> 
 
\t <div id="rowId_Monday_3"> 
 
\t \t <input class="StartTimeSlot" type="text" id="txtStartTime_Monday_3" name="txtStartTime_Monday_3" value="11:00 AM" /> 
 
\t \t <input class="EndTimeSlot" type="text" id="txtEndTime_Monday_3" name="txtEndTime_Monday_3" value="11:30 AM" /> 
 
\t \t <a title="Delete" id="rowIdIcon_Monday_3" onclick="" href="#" class="trash">Delete</a>  
 
\t </div> 
 
\t <div> 
 
\t \t <input type="submit" id="btnSave" name="Save" value="Save" /> 
 
\t </div> 
 
</div>

來源

2016-09-29 Pushkar Rathod

只需強制用戶填寫空行或刪除它們？另外，我更喜歡通過他們的類找到相似的行，而不是通過每行增加1的Id。 – Adder

感謝@Adder的評論。那麼所有領域都是非強制性的。在失去焦點時，我已經在他們的班級找到了類似的行。只有用戶在輸入數據時如何驗證它們的問題。我不知道如何找到有價值的上排結束時間。我嘗試.parent（）和最接近（），但它不工作。任何其他想法？ –

好給一些想法：分配班「期間開始」和「期末」的輸入元素。將所有輸入元素獲取到列表中，然後在這些列表中導航。

//example: Monday 
var $begins = $('#divMonday').find('.period.begin'); 
var $ends = $('#divMonday').find('.period.end'); 

//example: validate 3nd begin 
var valid = false; 

var k=2; 
if($begins[k].val() != '') { 
    for(var j= k-1; j>=0; --j) { 
    if($ends[j].val() != '') { 
     if(parseInt($begins[k].val()) > parseInt($ends[j].val())) 
      valid= true; 
     break; 
    } 
    } 
    if(j<0) 
    valid = true; 
}

來源

2016-09-30 12:59:46 Adder

感謝@Adder的建議。我想知道如何獲得divMonday中控件的總數，因爲在你的例子中，你已經取得了k = 2，我相信這是一段StartTime控件。 –

$ starts.length是開始元素的數量 – Adder

在jQuery中驗證多個StartTime和EndTime

回答

相關問題