jQueryで複数のStartTimeとEndTimeを検証する

Question

weekDayで複数の開始時刻と終了時刻のテキストボックスがある1つの画面があります。jqueryを使用して以下の規則を検証したいと考えています。開始時間は終了時間を超えることはできません

Day wise Start Time End Time

1. 。
2. 終了時刻は開始時刻より短くすることはできません。
3. 次の行の開始時刻は、前の行の終了時刻と同じかそれ以下にすることはできません。
4. テキストボックスのフォーカスアウトと最終送信ボタンで検証が行われます。 [画像には表示されませんが、その位置にあるとは申し訳ありません]

注意：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>

Answer 1

まあいくつかのアイデアを与えるために： 「開始時間」と入力要素に「期間終了」クラスを割り当てます。すべての入力要素をリストに入れて、これらのリストをナビゲートします。

//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; 
}