Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Date Validation on Form

Posted on 2011-03-17
10
Medium Priority
?
205 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
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 2000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

580 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