Date validation through javascript

Question

Hello guys, Please help me to solve my problem. I am stuck with a problem in javascript. My problem is that i have to use date validation. I have two date fields and i am putting the validation on both, but the problem is that it is working on one datefield and not in the other one. Like:

code of javascript

function ValidateDate(DateFrom,DateTo)
{
  var SDate = document.checkbookrequest.txtDateFrom.value;
  var EDate = document.checkbookrequest.txtDateTo.value;
//variables for date from.
//In dob1 i am taking the date which the user is giving 
//and split it into mm/dd/yyyy to compare with current date
    var dob1=document.checkbookrequest.txtDateFrom.value;
    var arr1 = dob1.split("/");
    var m1= arr1[0];
    var d1 = arr1[1];
    var y1 = arr1[2];
//variables for date from.
//In dob i am taking the date which the user is giving 
//and split it into mm/dd/yyyy to compare with current date
    var dob=document.checkbookrequest.txtDateTo.value;
    var arr = dob.split("/");
    var m= arr[0];
    var d = arr[1];
    var y = arr[2];

//these variable for checking the datefiels should not be blank
    var endDate = new Date(EDate);
    var startDate= new Date(SDate);

    if(SDate != '' && EDate != '' && startDate > endDate)
    {

      alert(" Date To must be greater than or equal to Date From.");
      document.checkbookrequest.txtDateTo.value = "";
      document.checkbookrequest.txtDateTo.focus();
      return false;
    }
    else if(SDate == '')
    {
      alert("Please enter Date From");
      document.checkbookrequest.txtDateFrom.focus();
      return false;
    }
    else if(EDate == '')
    {
      alert("Please enter Date To");
      document.checkbookrequest.txtDateTo.focus();
      return false;
    }

//this is to chck the from date
    else if (EDate != "")
    {
      currentdate = new Date();
      a=currentdate.getMonth()+1;
      b=currentdate.getDate();
      c=currentdate.getFullYear();
      if((d==b)&&(m==a)&&(y==c))
    {
      alert('Please Enter valid Date Of Birth');
      return false;
    }
      else if ((d>b)&&(m==a)&&(y==c))
    {
      alert('Please Enter valid Date Of Birth');
      return false;
    }
    else if (y<=c-100)
    {
      alert('Please Enter valid Date Of Birth');
      return false;
    }
    else{
      document.checkbookrequest.cmd.value='btnSearch';
      document.checkbookrequest.submit();
    }
 }

//this is to chck the to date
    else if (SDate != "")
    {
      currentdate = new Date();
      a=currentdate.getMonth()+1;
      b=currentdate.getDate();
      c=currentdate.getFullYear();
      if((d1==b)&&(m1==a)&&(y1==c))
      {
        alert('Please Enter valid Date Of Birth in DateFrom');
        return false;
      }
      else if ((d1>b)&&(m1==a)&&(y1==c))
      {
        alert('Please Enter valid Date Of Birth in DateFrom');
        return false;
      }
      else if (y1<=c-100)
      {
        alert('Please Enter valid Date Of Birth in DateFrom');
        return false;
      }
      else{
       document.checkbookrequest.cmd.value='btnSearch';
       document.checkbookrequest.submit();
      }
    }


    else{
      document.checkbookrequest.cmd.value='btnSearch';
      document.checkbookrequest.submit();
    }        
  }

code of html

<td>Date From:<font color="red">*</font></td>
<td><input type="text" name="txtDateFrom" ></td>

<td>Date To:<font color="red">*</font></td>
<td><input type="text" name="txtDateTo"> </td>

<input type="button" name="btnSearch" value="Search" onclick="return ValidateDate(txtDateFrom,txtDateTo)" /></td>

If i put the "dateto" validation above, then it is working but if i put it after the validation of date from, then date from is working and date to is not working

Is anything wrong in that? Please help me... Thanks in advance

Answer 1

I would suggest you back away from this road altogether and lessen your headaches by using controls that make it impossible to enter invalid data. Why don't you use a jQuery calendar for input. With two valid dates, your validation code would now be restricted to checking if the end date is earlier than the start date

Answer 2

My guess is that there is something wrong with the nested if's.

[EDIT] If that's not it, refactor the code. Move the various checks into new JavaScript functions. This should make the code shorter and easier to understand. Try to avoid duplicating any checks, even if it makes the JS slower -- your main task is to understand, not to optimize the code. You can optimize later, if you find the code is too slow (which it won't be).

Then create tests which verify that the code actually behaves the way you expect it to. You can use one of the many JS frameworks or use a little trick: Define a function which adds text to an element with the ID debug. In your code, call that function at various places with the current values of variables, etc. Check that the values are correct.

Later, you can simply define the function to be empty or add a return as the first command to disable it.

Answer 3

I second the refactor suggestion by Aaron. By breaking the existing large function down into smaller units it would be much easier to locate the bug.

As for validating dates in JavaScript, you might find this helpful:

var dateFromTxtBox = new Date(document.getElementById('txtDateFld').value);
if (isNaN(dateFromTxtBox))
{
  alert('Invalid date entered in text box');
  return;
}

At this point, you know the user has given a proper date and you can work with the dateFromTxtBox variable to test other validations (e.g. before/after a specific date).