Solved

Date Validation on Form

Posted on 2011-03-17
10
198 Views
Last Modified: 2012-06-21
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

0
Comment
Question by:Washcare
  • 5
  • 4
10 Comments
 
LVL 14

Expert Comment

by:robasta
ID: 35156368
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 35156680
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
 

Author Comment

by:Washcare
ID: 35156828
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 35157028
Did you get any of the alert messages telling you that valiDate() was being called, and what was happening?
0
 

Author Comment

by:Washcare
ID: 35157198
No I did not get any messages?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 41

Expert Comment

by:HonorGod
ID: 35157352
What happens if you delete lines 26 through 29, thus making all of the scripts part of the same section?
0
 

Author Comment

by:Washcare
ID: 35157660
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
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 35157924
> 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
 

Author Closing Comment

by:Washcare
ID: 35198860
Many thanks, with you assistance we have solved my problem.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 35199794
outstanding news.

Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap 3 icons 3 40
Issue in webpage 6 34
A form to still have contents even if some are wrong 10 47
Centered Image 2 23
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now