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

forstersAsked:
Who is Participating?
 
BobHavertyComhCommented:
It looks correct on the surface. The first thing I would do is to bring up the browser's dev tools and check the console for errors. In FF and Chrome, you can right click anywhere on your page and choose inspect element, and this will bring up the dev tools. You can even create breakpoints in the dev tools that will work upon page refresh. If you don't see any immediate errors, chances are that your code is working, but your conditional logic is off somehow and it's coming back as true when it should be false, or vice versa. But if it is actually failing, the console will pick it up.
0
 
Michel PlungjanIT ExpertCommented:
You could instead do the validation on submit of the form and return false if they failed:
function TimeDuration () {

  if (duration >"03:30"){ // no need to test the other
      alert();
      ... focus()
     return false;
  }
  return true;
}
function TimeValidate() {

  if (start != "--select a time--" && end != "--select a time--" && start >= end) {
      alert();
      ... focus()
     return false;
  }
  return true;
}
window.onload=function() {
  docment.getElementById('id of form').onsubmit=function() {
    if (!TimeValidate()) return false;
    if (!TimeDuration()) return false;
    return true;
  }
}

Open in new window

0
 
forstersAuthor Commented:
Thanks both
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.