forsters
asked on
Javascript to prevent user moving off a control until the data is valid
hi experts,
I'm using javascript to do a bit of validation on a web form, in a couple of instances I am setting the focus back to a control after flagging up an erroneous entry - so suggesting that the user looks at the data in that control and amend it, but if they tab off the control without amending the data they are not warned that there is still a problem. I tried re-calling the validation on the onblur event but this didn't work as expected.
relevant code below:
I'm using javascript to do a bit of validation on a web form, in a couple of instances I am setting the focus back to a control after flagging up an erroneous entry - so suggesting that the user looks at the data in that control and amend it, but if they tab off the control without amending the data they are not warned that there is still a problem. I tried re-calling the validation on the onblur event but this didn't work as expected.
relevant code below:
<td style="width: 180px;">
<asp:DropDownList CssClass="dropdown" ID="DDLStart" onchange="TimeDuration()" AppendDataBoundItems="true" Width="130" runat="server">
</asp:DropDownList>
</td>
<td>To:</td>
<td style="width: 180px;">
<asp:DropDownList CssClass="dropdown" ID="DDLStop" onchange="TimeDuration()" onblur="TimeValidate()" AppendDataBoundItems="true" Width="130" runat="server">
</asp:DropDownList>
</td>
function TimeDuration() {
var start = document.getElementById('<%=DDLStart.ClientID%>').value;
var end = document.getElementById('<%=DDLStop.ClientID%>').value;
if (start != '' && end != '') {
// SPLIT INTO HOURS AND MIN
var ds = start.split(':');
var de = end.split(':');
// WORK OUT DIFF IN MIN
var diff = (de[0] * 60 + de[1] * 1) - (ds[0] * 60 + ds[1] * 1);
// SET THE SIGN IF START > END
var sign = (diff < 0) ? '-' : '';
// WORK WITH ABS VALUE
diff = Math.abs(diff);
// SET THE DIFF IN MINUTES
//document.getElementById('mindiff').value = sign + diff;
// CREATE A FORMATTED STRING hh:mm
var hours = parseInt(diff / 60);
var min = diff - (hours * 60);
// LETS PAD THE STRING
min = "00" + min;
hours = "00" + hours;
var hoursdecimal = "";
var duration = sign + hours.substr(hours.length - 2) + ':' + min.substring(min.length - 2);
if (duration.split(':')[1] == '00') {
hoursdecimal = duration.split(':')[0] + ".00";
}
if (duration.split(':')[1] == '15') {
hoursdecimal = duration.split(':')[0] + ".25";
}
if (duration.split(':')[1] == '30') {
hoursdecimal = duration.split(':')[0] + ".50";
}
if (duration.split(':')[1] == '45') {
hoursdecimal = duration.split(':')[0] + ".75";
}
// SET THE FORMATTED DIFF
document.getElementById('<%=TxtDuration.ClientID%>').value = duration;
// SET THE FORMATTED DIFF
document.getElementById('<%=TxtDurationDecimal.ClientID%>').value = hoursdecimal;
if (start != "--select a time--" && end != "--select a time--" && duration >"03:30"){
alert('time exceeds 3.5 hours you must make a seperate entry');
document.getElementById('<%=DDLStop.ClientID %>').focus();
}
}
}
</script>
<script type="text/javascript">
function TimeValidate() {
var start = document.getElementById('<%=DDLStart.ClientID%>').value;
var end = document.getElementById('<%=DDLStop.ClientID%>').value;
if (start != "--select a time--" && end != "--select a time--" && start >= end) {
alert('End time should be after start time.');
document.getElementById('<%=DDLStop.ClientID %>').focus();
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER