?
Solved

Date Validation on Form

Posted on 2011-03-17
10
Medium Priority
?
203 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

752 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