Validate dynamic date pairs 1

xsw1971 · Nov 30, 2004

I am using ColdFusion to create a dynamic form based on the results of a database query. The form lists assets that are available to book on a project. Users then book as many of the assets as they want by selecting a start and end date for each asset from a popup calendar (each asset can have different start/end dates).

Upon clicking the Submit button I need to validate each pair of dates for the following:

1. Ensure that both a start and end date were entered for each asset (it's OK if both start/end are blank, just not one or the other)

2. Ensure that the end date of the pair is not earlier than the start date.

I don't have hard-coded field names because I don't know the size of the query. Therefore each start date field is named

Code:

#q_listing.identifier_id#_start

and each end date field is named

Code:

#q_listing.identifier_id#_end

(where #q_listing.identifier_id# is the ID of the asset). On my processing page I parse apart the field name to determine the ID and whether or not it's a start or end field.

I'm just not sure how to get the dynamic field names into JS validation so that it compares the correct pair values.

Any ideas? Thanks a bunch in advance!!

xsw1971

PS - the Tek-Tips search engine is down, so I was unable to determine if a post like this already exists.

rac2 · Nov 30, 2004

Maybe write a Javascript function that has an arugument for the name of the corresponding start date field. Create that argument dynamically just as you create the field name.
Use it in an onchange event handler in the end date field.

Code:

<input type="text" name="#q_listing.identifier_id#_end" onchange="isValidEndDate( this, document.forms[0].#q_listing.identifier_id#_start)"

The function compares the value of this field to the value of the field referenced in the second argument and displays an alert if the dates are not appropriate.

Code:

<script>
function isValidEndDate( objDateEndField, objDateStartField){
  var d1 = new Date(objDateStartField.value);
  var d2 = new Date(objDateEndField.value);
  
  //Here follows details of the validation.
}
<script>

So this code may not actually work, I dont know ColdFusion. But the idea is simply to create dynamic Javascript validation code as well as creating a dynamic form.

xsw1971 · Dec 1, 2004

Thanks for the reply, rac2. I'm not able to call the isValidDate function because the onchange doesn't work.

I have international users and I want to ensure that everyone uses the same date format so I don't let users type the date. They have to pick a date from a popup calendar which then inserts their selection into the date field. Here's the code:

Code:

<input type="Text" name="f_start_date" onchange="isValidDate()">
<script language='javascript'>
  if (!document.layers) {
    document.write("<img src='/rms/images/cal.gif' onclick='popUpCalendar(this, form_details.f_start_date, \"yyyy/mm/dd\")'>");
  }
</script>

I've tried onblur, onchange, onfocus, etc and nothing seems to work. How do I let the input field know that the value was changed so that it can call the function?

Thanks,
xsw1971

chessbot · Dec 1, 2004

How about calling it onsubmit?

Code:

<html>
<head>
<script type="text/javascript">
<!--

var datefields = new Array("#q_listing.identifier_id#");
// I'm not sure how, but put all date names in the array

function checkDates(f)
{
  var fine = true;
  for (var i=0; i<datafields.length; i++)
  {
    var start = datafields[i] + "_start";
    var end = datafields[i] + "_end";
    var fine = checkDates(f.elements[start], f.elements[end]);
    if (!fine)
      return false;
  }
  return true;
}

function checkDate(start, end)
{
  if (start.value == "" && end.value == "")
    return true;
  if ((start.value == "" && end.value != "") || (start.value != "" && end.value == ""))
  {
    alert("Please enter either no dates or both a start and end date!");
    start.focus();
    return false;
  }
  var startDate = new Date(start.value);
  var endDate = new Date(end.value);
  if (startDate.getTime() > endDate.getTime())
  {
    alert("Your starting date is greater than your end date!");
    start.focus();
    return false;
  }
  return true;
}

// -->
</script>
</head>
<body>
<form onsubmit="return checkDates(this);">
 <!-- fields and stuff -->
</form>
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

xsw1971 · Dec 1, 2004

Chessbot, actually that's what I really wanted to do. I'll give this a shot and let you know how it works (maybe be a day or two).

Thanks!
xsw1971

xsw1971 · Dec 7, 2004

OK, I tried this today and it doesn't work. First I noticed some inconsistencies - you have both "datefields" and "datafields" in the script. I assumed they were supposed to be the same so I changed one of them. In your CheckDates(f) function you called CheckDates() but I think you meant CheckDate(start,end) so I changed that too. Let me know if I supposed to do that.

I also hardcoded the array for testing. Nothing happens. I've tried it with 1 date and not the other, I've tried making the start date later than the end date, and it just submits the form.

Any ideas?

xsw1971

chessbot · Dec 7, 2004

Fixing the mistakes (nice catch!), this works for me:

Code:

<html>
<head>
<script type="text/javascript">
<!--

var datafields = new Array("one","two");
// I'm not sure how, but put all date names in the array

function checkDates(f)
{
  var fine = true;
  for (var i=0; i<datafields.length; i++)
  {
    var start = datafields[i] + "_start";
    var end = datafields[i] + "_end";
    var fine = checkDate(f.elements[start], f.elements[end]);
    if (!fine)
      return false;
  }
  return true;
}

function checkDate(start, end)
{
  if (start.value == "" && end.value == "")
    return true;
  if ((start.value == "" && end.value != "") || (start.value != "" && end.value == ""))
  {
    alert("Please enter either no dates or both a start and end date!");
    start.focus();
    return false;
  }
  var startDate = new Date(start.value);
  var endDate = new Date(end.value);
  if (startDate.getTime() > endDate.getTime())
  {
    alert("Your starting date is greater than your end date!");
    start.focus();
    return false;
  }
  return true;
}

// -->
</script>
</head>
<body>
<form onsubmit="return checkDates(this);">
 <input type="text" name="one_start"><input type="text" name="one_end"><br>
 <input type="text" name="two_start"><input type="text" name="two_end"><br>
 <input type="submit">
</form>
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

xsw1971 · Dec 7, 2004

Holy cow, Chessbot, that is SO COOL! It works absolutely perfectly - my users are going to love this! Now I just have to get the field ids into an array but I think that's the easy part.

You ROCK! [2thumbsup]

xsw1971

chessbot · Dec 7, 2004

Great! Glad it works.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Validate dynamic date pairs 1

xsw1971

Programmer

rac2

Programmer

xsw1971

Programmer

chessbot

Programmer

xsw1971

Programmer

xsw1971

Programmer

chessbot

Programmer

xsw1971

Programmer

chessbot

Programmer

Similar threads

Part and Inventory Search

Sponsor