PDA

Click to See Complete Forum and Search --> : validate dates client-side

lcscne
10-03-2003, 02:06 PM
Sorry kosla78,
But when I tried your script, it always returned false, no matter if the date entered was within the acceptable range or not. So I tried to enhance it a little with the following but it doesn't work either (always returns false). Boy this doesn't seem like rocket science but I can't find this anywhere on the web, surly someone has done clientside date validation before. Thanks for your response.

function ValiDate(oTextBox)
{
var qtrstart =new Date();
var qtrend=new Date();
var entered=new Date();
qtrstart="8/25/2003";
qtrend="10/25/2003";
entered=oTextBox.value;
if(entered < qtrstart | entered > qtrend)
{
alert("Both 'Assigned Date' and 'Due Date' must range between 8/25/2003 and 10/25/2003");
return false;
}
else
return true;
}
Charles
10-03-2003, 02:37 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
Date.prototype.inRange = function () {return this.getTime() > new Date(2003, 7, 25).getTime() && this.getTime() < new Date(2003, 9, 25).getTime()}
// -->
</script>

<form action="" onsubmit="return validate(this)">
<div>
<label>Assigned Date<input type="text" onchange="if (!new Date(this.value).inRange()) {alert(['The', this.previousSibling.data, 'is out of range.'].join(' ')); this.value=''; this.focus()}"></label>
<label>Due Date<input type="text" onchange=""if (!new Date(this.value).inRange()) {alert(['The', this.previousSibling.data, 'is out of range.'].join(' ')); this.value=''; this.focus()}"" name="due"></label>
<button type="submit">Submit</button>
</div>
</form>
lcscne
10-03-2003, 02:48 PM
Hey Charles,
I saw this technique on another posting but couldn't make sense of it. Would you be so kind as to put the cookies down on the shelf for this little one to get to? I would appreciate an expianation of how this works, me being a novice JS author it looks prety intense. Thanks much for your help.
Charles
10-03-2003, 02:54 PM
A full explination would require a full semester. What part don't you understand?
lcscne
10-03-2003, 03:51 PM
for all you people, like me, who live by "keep it simple stupid" here ya go.

function ValiDate(oTextBox)
{
//the values of these two strings are populated via an asp
//script that pulls start date and end date from my db table
var sd="8/25/2003"
var ed="10/25/2003"

//s,e and i are arrays ([2]=yyyy,[0]=mm,[1]=dd)
//s being the start date array
//e being the end date array
//i being the user input array
var s=sd.split('/')
var e=ed.split('/')
var i=oTextBox.value.split('/')

//create new date objects using constructed arrays
var startdate =new Date(s[2],s[0],s[1]);
var enddate=new Date(e[2],e[0],e[1]);
var inputdate=new Date(i[2],i[0],i[1]);

//run the comparison
if(inputdate.getTime() < startdate.getTime() || inputdate.getTime() > enddate.getTime())
{
alert("Both 'Assigned Date' and 'Due Date' must range between 8/25/2003 and 10/25/2003");
return false;
}
else
return true;
}
lcscne
10-03-2003, 03:53 PM
by the way Charles thank you for your input, you've streched me to a deeper level of js.
Charles
10-03-2003, 04:46 PM
A couple of things.

1) The Date object consctuctor can take a string that is the date in any number of formats. You don't need to parse the string yourself.

2) With the Date object the month number is offset by 1, or rather you need to keep in mind that 0 is the first ordinal number. January is month 0. This was done so that you could use the month number as the index of an Array.

3) See http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/date.html for details.
Xin
10-03-2003, 09:13 PM
you might want to take a look at my form checking script:

http://www.yxscripts.com/fg/form.html

which lets you validate date and date range in any date format. : )