Запретить пользователю вводить большее значение в текстовое поле

Question

У меня есть 2 texbox, первый имеет время начала второго, и пользователь должен ввести время окончания как в этом формате (00:00:00). Как я могу запретить пользователю вводить значение во втором текстовом поле ниже первого, поэтому конечное время должно превосходить время начала, это сообщение должно предупредить его. вот мои коды:

<input type="text" name="StartTime" id="StartTime" size="30"  
value="<?php echo $tab['StartTime'];?>" readonly="readonly" /></td></tr> 
<tr><td> 
<label>End Time</label> 
</td> 
<td> 
<input type="text" name="EndTime" id="EndTime" value="00:00:00" 
max="23:00" size="30" required pattern="[0-2][0-9]:[0-5][0-9]: 
[0-5][0-9]" title="Please enter end time this format 
(00:00:00),maximum value is: 23: 59: 59"/></td></tr> 

Если время начала, например, 08:00:00 и пользователь вводит 7:00:00 сообщение должно появиться, чтобы предупредить его. Спасибо

Answer 1

Проверка выполняется, когда пользователь/фокус покидает одно из текстовых полей после его изменения. Но вы можете вызвать его в любое время.

HTML:

StartTime: 
<input type="text" name="StartTime" id="StartTime" size="30" value="08:00:00" /> 
<br> 
<br> 
EndTime: 
<input type="text" name="EndTime" id="EndTime" size="30" value="16:00:00" /> 

JavaScrip:

function validateEndTimeGreaterStartTime() { 
    var valueStartTime = document.getElementById('StartTime').value; 
    var valueEndTime = document.getElementById('EndTime').value; 
    return Date.parse('01/01/2015 ' + valueEndTime) > Date.parse('01/01/2015 ' + valueStartTime); 
}; 

var elementStartTime = document.getElementById('StartTime'); 
var elementEndTime = document.getElementById('EndTime'); 
elementStartTime.onchange = function() { 
    if (!validateEndTimeGreaterStartTime()) { 
     alert("EndTime should be greater than StartTime"); 
    } 
}; 
elementEndTime.onchange = function() { 
    if (!validateEndTimeGreaterStartTime()) { 
     alert("EndTime should be greater than StartTime"); 
    } 
}; 

JSFiddle: https://jsfiddle.net/Lz60s0gp/