Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Date Validation on Form

Posted on 2011-03-17
10
Medium Priority
?
204 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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).

604 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