Link to home
Start Free TrialLog in
Avatar of forsters
forstersFlag for United Kingdom of Great Britain and Northern Ireland

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

Open in new window



 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();

          }
        }

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Arnold Layne
Arnold Layne
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of forsters

ASKER

Thanks both