Date Validation on Form

Good Afternoon

I would like to amend the following code, so that the Date field is validated for the following:

Data Entered
Data matches dd-mm-yyyy format

Is this possible with the validation I already have within the form?

Many thanks


<html>
<head>
<script language="javascript" type="text/javascript" src="../Comments/datetimepicker.js">
</script>

<script>
function validateForm(){
        if (isNaN(form["S1"].value)) {
            alert("The S1 field cannot contain letters");
            return false;
        }
        return validateFirst();
    }
function validateFirst()
{
var x=document.forms["form"]["S2"].value
if (x.length == 0)
  {
  alert("The S2 field must be completed");
  return false;
   }
document.forms[0].submit();
}
</script> 

<title>Database Form</title>
</head>
<body bgcolor="white" text="black">
<!-- Begin form code -->
<form name="form" method="post" action="../Comments/add_to_database.asp">
  <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
	<tr>
		<td width="256"><font size="2" face="Arial">S1:</font></td>
		<td><font face="Arial"> <input type="text" name="S1" maxlength="20"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">  
  S2:</font></td>
		<td><font face="Arial"> <input type="text" name="S2" maxlength="50"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  S3:</font></td>
		<td><font face="Arial"> <input type="text" name="S3" maxlength="50"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  Date:</font></td>
		<td><font face="Arial"><input id="demo1" type="text" name="date" size="20"> <a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="../images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></font></td>
	</tr>
	<tr>
		<td width="256"><font face="Arial" size="2">EN:</font></td>
		<td> <input type="text" name="EN" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  CW:</font></td>
		<td> <input type="text" name="CW" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  Status:</font></td>
		<td> <input type="text" name="Status" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  SSO:</font></td>
		<td> <input type="text" name="Sso" maxlength="50"></td>
	</tr>
	</table>
	<p><font face="Arial">
  <input type="button" name="button" value="Submit" onclick="validateForm();"/><font size="2"> </font>
<font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</font>
</body>
</html>

Open in new window

WashcareAsked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
> after != after

Do you, by any chance, mean "before != after"?

So, now we know that the field (i.e., id="demo1") on which you have:

onchange='valiDate(this.value)'

Is, in fact, being checked.

So, I would suggest that you:
- comment out the extra "alert()" statements in valiDate()
  e.g., change this line from:

    alert( 'before: "' + date + '"' );

  to:

//  alert( 'before: "' + date + '"' );

- have appropriate alert() messages for the invalid results
  e.g., instead of:

    alert( 'before != after' );

  you might want something like:

    alert( 'Invalid date specified.' );

- change the last return from this:

  return validateForm;

  to this:

  return false;

- What do you want to happen when an invalid date is entered?

  What if we change valiDate() just a little to be something like this?

  Then, we change the date input fields to be something like:

<input id="demo1" type="text" name="date" size="20" onchange='valiDate(this)'>

  Then, to validate the form, we check that the date fields aren't empty...

  How does that sound?
function valiDate( obj ) {
    var before = obj.value;
    if ( before.match( /^(\d{2})-(\d{2})-(\d{4})$/ ) ) {
      var date  = new Date( RegExp.$3, RegExp.$1 - 1, RegExp.$2 );
      var after = D2( date.getMonth() ) + '-' + D2( date.getDate() ) + '-' + date.getFullYear();
      if ( before == after ) {
        return
      }
    }
    alert( 'Invalid date specified: ' + obj.value );
    obj.value = 'MM-DD-YYYY'
  }

Open in new window

0
 
robastaCommented:
the jQuery vaidation plugin is handy when it comes to client-side validation. its also easy to add. see the 'jquery' site for example usage
0
 
HonorGodSoftware EngineerCommented:
Here is an example for verifying that the specified date not only matches the pattern, but is correct
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title> Date Validation </title>
<head>
<script type='text/javascript'>
  function D2( val ) {
    return ( val < 10 ) ? '0' + val : val;
  }

  function valiDate( date ) {
    alert( 'before: "' + date + '"' );
    var before = date.toString();
    if ( before.match( /^(\d{2})-(\d{2})-(\d{4})$/ ) ) {
      var date  = new Date( RegExp.$3, RegExp.$1, RegExp.$2 );
      var after = D2( date.getMonth() ) + '-' + D2( date.getDate() ) + '-' + date.getFullYear();
      alert( 'after: "' + after + '"' );
      if ( before == after )
        alert( 'before == after' );
        return true;
    }
    alert( 'before != after' );
    return false;
  }

</script>
</head>
<body>
  <input type='text' value='mm/dd/yyyy' onchange='valiDate(this.value)'>
</body>
</html>

Open in new window

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
WashcareAuthor Commented:
I have tried to implement this as per the code below. However it does not seem to complete any validation.

If the data field is empty it alows submittion
If the date feild has the data abc entered it does not flag it

Many thanks
<html>
<head>
<script language="javascript" type="text/javascript" src="../Comments/datetimepicker.js">
</script>

<script type='text/javascript'>
  function D2( val ) {
    return ( val < 10 ) ? '0' + val : val;
  }

  function valiDate( date ) {
    alert( 'before: "' + date + '"' );
    var before = date.toString();
    if ( before.match( /^(\d{2})-(\d{2})-(\d{4})$/ ) ) {
      var date  = new Date( RegExp.$3, RegExp.$1, RegExp.$2 );
      var after = D2( date.getMonth() ) + '-' + D2( date.getDate() ) + '-' + date.getFullYear();
      alert( 'after: "' + after + '"' );
      if ( before == after )
        alert( 'before == after' );
        return true;
    }
    alert( 'before != after' );
    return false;
  }

</script>


<script>
function validateForm(){
        if (isNaN(form["S1"].value)) {
            alert("The S1 field cannot contain letters");
            return false;
        }
        return validateFirst();
    }
function validateFirst()
{
var x=document.forms["form"]["S2"].value
if (x.length == 0)
  {
  alert("The S2 field must be completed");
  return false;
   }
document.forms[0].submit();
}
</script> 

<title>Database Form</title>
</head>
<body bgcolor="white" text="black">
<!-- Begin form code -->
<form name="form" method="post" action="../Comments/add_to_database.asp">
  <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
	<tr>
		<td width="256"><font size="2" face="Arial">S1:</font></td>
		<td><font face="Arial"> <input type="text" name="S1" maxlength="20"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">  
  S2:</font></td>
		<td><font face="Arial"> <input type="text" name="S2" maxlength="50"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  S3:</font></td>
		<td><font face="Arial"> <input type="text" name="S3" maxlength="50"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  Date:</font></td>
		<td><font face="Arial"><input id="demo1" type="text" name="date" onchange='valiDate(this.value)' size="20"> <a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="../images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></font></td>
	</tr>
	<tr>
		<td width="256"><font face="Arial" size="2">EN:</font></td>
		<td> <input type="text" name="EN" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  CW:</font></td>
		<td> <input type="text" name="CW" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  Status:</font></td>
		<td> <input type="text" name="Status" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  SSO:</font></td>
		<td> <input type="text" name="Sso" maxlength="50"></td>
	</tr>
	</table>
	<p><font face="Arial">
  <input type="button" name="button" value="Submit" onclick="validateForm();"/><font size="2"> </font>
<font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</font>
</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Did you get any of the alert messages telling you that valiDate() was being called, and what was happening?
0
 
WashcareAuthor Commented:
No I did not get any messages?
0
 
HonorGodSoftware EngineerCommented:
What happens if you delete lines 26 through 29, thus making all of the scripts part of the same section?
0
 
WashcareAuthor Commented:
If I implement as per the code below I get the following:

Blank = before:"undefined"
17-3-2011 = before:"undefined"
abc = before:"abc"
         after != after

It also does not check S1 or S2?

Regards



<html>
<head>
<script language="javascript" type="text/javascript" src="../Comments/datetimepicker.js">
</script>

<script type='text/javascript'>
  function D2( val ) {
    return ( val < 10 ) ? '0' + val : val;
  }

  function valiDate( date ) {
    alert( 'before: "' + date + '"' );
    var before = date.toString();
    if ( before.match( /^(\d{2})-(\d{2})-(\d{4})$/ ) ) {
      var date  = new Date( RegExp.$3, RegExp.$1, RegExp.$2 );
      var after = D2( date.getMonth() ) + '-' + D2( date.getDate() ) + '-' + date.getFullYear();
      alert( 'after: "' + after + '"' );
      if ( before == after )
        alert( 'before == after' );
        return true;
    }
    alert( 'before != after' );
    return validateForm;
  }
function validateForm(){
        if (isNaN(form["S1"].value)) {
            alert("The S1 field cannot contain letters");
            return false;
        }
        return validateFirst();
    }
function validateFirst()
{
var x=document.forms["form"]["S2"].value
if (x.length == 0)
  {
  alert("The S2 field must be completed");
  return false;
   }
document.forms[0].submit();
}
</script>


<title>Database Form</title>
</head>
<body bgcolor="white" text="black">
<!-- Begin form code -->
<form name="form" method="post" action="../Comments/add_to_database.asp">
  <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
	<tr>
		<td width="256"><font size="2" face="Arial">S1:</font></td>
		<td><font face="Arial"> <input type="text" name="S1" maxlength="20"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">  
  S2:</font></td>
		<td><font face="Arial"> <input type="text" name="S2" maxlength="50"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  S3:</font></td>
		<td><font face="Arial"> <input type="text" name="S3" maxlength="50"></font></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  Date:</font></td>
		<td><font face="Arial"><input id="demo1" type="text" name="date" size="20" onchange='valiDate(this.value)'> <a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="../images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></font></td>
	</tr>
	<tr>
		<td width="256"><font face="Arial" size="2">EN:</font></td>
		<td> <input type="text" name="EN" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  CW:</font></td>
		<td> <input type="text" name="CW" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  Status:</font></td>
		<td> <input type="text" name="Status" maxlength="50"></td>
	</tr>
	<tr>
		<td width="256"><font size="2" face="Arial">
  SSO:</font></td>
		<td> <input type="text" name="Sso" maxlength="50"></td>
	</tr>
	</table>
	<p><font face="Arial">
  <input type="button" name="button" value="Submit" onclick="valiDate();"/><font size="2"> </font>
<font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</font>
</body>
</html>

Open in new window

0
 
WashcareAuthor Commented:
Many thanks, with you assistance we have solved my problem.
0
 
HonorGodSoftware EngineerCommented:
outstanding news.

Thanks for the grade & points.

Good luck & have a great day.
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.