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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.