Prevent user enter greater value in textbox

Question

I have 2 texbox the first has the start time end the second the user should enter the end time both on this format (00:00:00). How can i prevent the user to enter a value in the second textbox inferior to the fist one, so the endtime must superior to the start time, it he does message should warn him. behold my codes:

<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>

If the start time is for instance 08:00:00 and the user enter 07:00:00 a message should pop up to warn him. Thank you

Well, you seem to be using a validation framework already? Also you may want to have a look at the HTML5 type=time input. — plalx, May 15 '15 at 12:38
possible duplicate of [Javascript - date range validation](http://stackoverflow.com/questions/13780881/javascript-date-range-validation) — abc123, May 15 '15 at 12:40
this validation framework is for preventing the user to enter hour like 56:80:76, the higher value is 23:59:59. — Prophete Baptiste, May 15 '15 at 12:41

Jan · Answer 1 · 2015-05-15T15:15:19.563

0

The validation is triggered when the user/focus leaves one of the textfields after changing it. But you can trigger it any time you want.

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/

edited May 15 '15 at 15:15

answered May 15 '15 at 13:09

Jan

2,853
2
21
26

Thank you so much for your codes it's so helping, however i would like to display a message instead of turning red when user enter end time inferior to start time. To do so in this part of code elementEndTime.onchange = function() i replace elementEndTime.style.color = "red"; by alert( " End time should be greater than end time" );. Unfortunately the message is not pop up. Do you have an idea? – Prophete Baptiste May 15 '15 at 13:43
i updated the code to reflect your requested behaviour. but remember, that the validation is only triggered when the one of the inputs lost its focus after it was changed. if you want to trgger it at any other time you have to call the validation at that point again (for ex. when submitting a form). – Jan May 15 '15 at 15:17
@PropheteBaptiste just checked the code again and it is working well in desktop-browsers. Do you still have problems with this part of your code? If your problem got solved, than remember to accept the answere. regards jan – Jan May 17 '15 at 13:45

Prevent user enter greater value in textbox

1 Answers1