防止用戶在文本框中輸入更大的值

我有2個texbox第一個有開始時間結束第二個用戶應該輸入結束時間這兩種格式（00:00:00）。我怎樣才能防止用戶在第二個文本框中輸入一個低於第一個文本框的值，所以endtime必須優於開始時間，他所做的消息應該警告他。你看我的代碼：防止用戶在文本框中輸入更大的值

<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和用戶輸入07:00:00消息應該彈出警告他。謝謝

來源

2015-05-15 Prophete Baptiste

嗯，你似乎已經使用驗證框架？你也可以看看HTML5 type = time的輸入。 – plalx

[Javascript - 日期範圍驗證]（http://stackoverflow.com/questions/13780881/javascript-date-range-validation） – abc123

這個驗證框架可能會阻止用戶像56:80:76那樣輸入小時，較高的值是23:59:59。 –

驗證在用戶/焦點在更改後離開其中一個文本字段時觸發。但是你可以隨時觸發它。

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/

來源

2015-05-15 13:09:29 Jan

非常感謝你的代碼，它是如此的幫助，但是我想顯示一條消息，而不是在用戶輸入結束時間低於開始時間時變紅。在這部分代碼中這樣做elementEndTime.onchange = function（）我替換elementEndTime.style.color =「red」;通過alert（「結束時間應該大於結束時間」）;.不幸的是，消息不會彈出。你有好主意嗎？ –

我更新了代碼以反映您請求的行爲。但請記住，只有當其中一個輸入在更改後失去焦點時纔會觸發驗證。如果您想在其他任何時候再次嘗試它，則必須再次調用驗證（例如，在提交表單時）。 – Jan

@PropheteBaptiste只是再次檢查了代碼，它在桌面瀏覽器中運行良好。你的代碼的這部分還存在問題嗎？如果你的問題解決了，比記得接受答案。問候1月 – Jan

防止用戶在文本框中輸入更大的值

回答

相關問題