Question

我有一个屏幕，其中有多个开始时间和结束时间文本框按周计算。我想使用jquery验证以下规则。

Day wise Start Time End Time

开始时间不能超过结束时间。
结束时间不能小于开始时间。
下一行的开始时间不能等于或小于前一行的结束时间。
验证应该在文本框焦点和最终提交按钮上激活。 [抱歉它在图像中不可见，但假设它在那里]

注意： - 1.用户可以从任何位置删除任何行。 2.用户可以从上到下，从下到上进行输入。他可以在中间留空行。

我尽我所能进行验证，因为我在jQuery方面缺乏经验，但如果用户在中间留下空行或删除任何行，则无法正常工作。

任何帮助都将不胜感激!!

提前致谢。 - Pushkar Rathod

＆＃13;

var isStartTimeError = false;
var isEndTimeError = false;

$(document).ready(function () {  
  
$("#btnSave").click(function (e) {
    if(ValidateOnSave())
      {
        alert('Perfect !!');
      }
  });

  		$( ".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();
    });

＆＃13;

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

＆＃13;

<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" >
	<div id="rowId_Monday_0">
		<input class="StartTimeSlot" type="text" id="txtStartTime_Monday_0" name="txtStartTime_Monday_0" value="08:00 AM" />  
		<input class="EndTimeSlot" type="text" id="txtEndTime_Monday_0" name="txtEndTime_Monday_0" value="08:30 AM" />
		<a title="Delete" id="rowIdIcon_Monday_0" onclick="" href="#" class="trash" >Delete</a>      
	</div>	
	<div id="rowId_Monday_1">
		<input class="StartTimeSlot" type="text" id="txtStartTime_Monday_1" name="txtStartTime_Monday_1" value="09:00 AM" />  
		<input class="EndTimeSlot" type="text" id="txtEndTime_Monday_1" name="txtEndTime_Monday_1" value="09:30 AM" />  
		<a title="Delete" id="rowIdIcon_Monday_1" onclick="" href="#" class="trash">Delete</a>      
	</div>
	<div id="rowId_Monday_2">
		<input class="StartTimeSlot" type="text" id="txtStartTime_Monday_2" name="txtStartTime_Monday_2" value="10:00 AM" />  
		<input class="EndTimeSlot" type="text" id="txtEndTime_Monday_2" name="txtEndTime_Monday_2" value="10:30 AM" />  
		<a title="Delete" id="rowIdIcon_Monday_2" onclick="" href="#" class="trash">Delete</a>      
	</div>
	<div id="rowId_Monday_3">
		<input class="StartTimeSlot" type="text" id="txtStartTime_Monday_3" name="txtStartTime_Monday_3" value="11:00 AM" />  
		<input class="EndTimeSlot" type="text" id="txtEndTime_Monday_3" name="txtEndTime_Monday_3" value="11:30 AM" />  
		<a title="Delete" id="rowIdIcon_Monday_3" onclick="" href="#" class="trash">Delete</a>      
	</div>
	<div>
		<input type="submit" id="btnSave" name="Save" value="Save" />
	</div>
</div>

＆＃13;

Answer 1

好好提出一些想法：将类“period begin”和“period end”分配给输入元素。将所有输入元素放入列表中，然后在这些列表中导航。

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

在jQuery中验证多个StartTime和EndTime

1 个答案: