Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Form Validation

Posted on 2011-03-15
29
Medium Priority
?
304 Views
Last Modified: 2012-05-11
Good Morning

Is it possible to add form validation to the supplied code? I would like to validate all the the input fields, before the data is sent to the database, using the submit button.

S1 is a number only field
Date is a date feild

Many thanks
<html>
<head>
<script language="javascript" type="text/javascript" src="../Comments/datetimepicker.js">
</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="submit" name="Submit" value="Submit"><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
  • 12
  • 11
  • 6
29 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35136748
add the validation using the following links

for number only: Use isNaN() method
http://www.w3schools.com/jsref/jsref_isnan.asp

for date validation
http://www.breakingpar.com/bkp/home.nsf/0/75A5C758B9DF576087256AFB00140789
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35136772
also replace line 52 by

<input type="submit" name="button" value="Submit" onclick="validateFirst()">

the submit logic should be something like
<script>
  function validateFirst()
  {
     if ( number is not valid )
     {
        return false;
     }
     if ( date is not valid )
     {
        return false;
     }
    document.forms[0].submit();
  }
</script>
0
 

Author Comment

by:Washcare
ID: 35137023
guryinder372

So starting simply the following should validate the field S2, before allowing the submission to the database?

I know it was not one the the fields I originally identified, but if I can get this working then I should be able to follow the logic for the other more complex fields.

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

<script>
function validateFirst()
{
var x=document.forms["myForm"]["S2"].value
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}
</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="submit" name="button" value="Submit" onclick="validateFirst()"><font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</font>
</body>
</html>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35137040
replace line 10 by

if (x.length == 0)

and add this line after line 14

document.forms["myForm"].submit();
0
 

Author Comment

by:Washcare
ID: 35137147
I have made the changes, how ever it does not seem to work? Do I need to change myForm to the real name of the form? Which is database_form.htm?

Many thanks
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35137159
<< I have made the changes, how ever it does not seem to work?>>
Avoid just saying, <<doesn't seem to work>>. Please be specific.

Do you mean to say that form submit doesn't happen at all?
try
document.forms[0].submit();

0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35137173
You shouldn't have to submit the form is JS.

Change
<input type="submit" name="button" value="Submit" onclick="validateFirst()">

to
<input type="submit" name="button" value="Submit" onclick="return validateFirst()">

returning false on the onclick event should cancel the form submit.
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35137259
The name of your form is 'form'

<form name="form" method="post" action="../Comments/add_to_database.asp">

if you are using:
var x=document.forms["myForm"]["S2"].value

it will fail change to either:
var x=document.forms["form"]["S2"].value
or
var x=document.forms[0]["S2"].value

0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35137360
In fact as you have named your form you should just be able to use:
form["S2"].value
try the following:

<html>
<head>
<script language="javascript" type="text/javascript" src="../Comments/datetimepicker.js">
</script>
<script>
    function validateForm() {
        if (isNaN(form["S2"].value)) {
            alert("not a number");
            return false;
        }
    }
</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="submit" name="Submit" value="Submit" onclick="return validateForm();"/><font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</body>
</html>

Open in new window

0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35137374
Should have mentioned... to test the above make sure you put some random letters in the S2 field before clicking submit
0
 

Author Comment

by:Washcare
ID: 35138054
gaysmith

Thank you for the above code, this works to check that S1 contains only numbers. Called validateForm

gurvinder372

Thank you for you suggested amendments, I can know check S2 for if data has been entered. Called validateFirst

How can I combiend the two? As I have tried:

  <input type="submit" name="Submit" value="Submit" onclick="return validateForm();" onclick validateFirst();"/><font size="2"> </font>

This however only runs the first funcition?

Many thanks





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

Open in new window

0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 200 total points
ID: 35138070
make it one

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


  <input type="submit" name="Submit" value="Submit" onclick="return validateForm();"/><font size="2"> </font>
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35138081
also since you are submitting the form with javascript itself, you can simply do

<input type="button" name="Submit" value="Submit" onclick="validateForm();"/><font size="2"> </font>
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35138108
Put it all in the validateForm function (sorry i confused things by calling it validateForm instead of validateFirst)

<html>
<head>
<script language="javascript" type="text/javascript" src="../Comments/datetimepicker.js">
</script>
<script>
    function validateForm() {
        if (form["S2"].length == 0)
       {
          alert("S2 must be filled out");
          return false;
       }
        if (isNaN(form["S2"].value)) {
            alert("not a number");
            return false;
        }
         //put all of your conditions in here
    }
</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="submit" name="Submit" value="Submit" onclick="return validateForm();"/><font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</body>
</html>

Open in new window

0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35138152
If you decide to submit the form using javascript as gurvinder372 suggests you can also take out value="submit" as that won't be needed either!

<input type="button" name="Submit" onclick="validateForm();"/>
0
 

Author Comment

by:Washcare
ID: 35138239
gurvinder372

The code achieves the following:

If S1 is not numbers only - message box
Fix S1 Leaving S2 Blank - message box for S2

However the form is submitted, the user is not returned to correct S2?

Many thanks

0
 

Author Comment

by:Washcare
ID: 35138285
gaysmith

I take it that you example is checking two conditions on the same value S2, I am looking to check S1 as a number only and for S2 not to be blank?

<script>
    function validateForm() {
        if (form["S2"].length == 0)
       {
          alert("S2 must be filled out");
          return false;
       }
        if (isNaN(form["S1"].value)) {
            alert("not a number");
            return false;
        }
         //put all of your conditions in here
    }
</script>

Many thanks
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35139422
I lost track of your fields but it was just a code example you need to change your conditions to suit your needs, S1/S2 etc.

I see you are using a date picker js plugin. If you are lucky there might be a function in the plugin that can validate your date textbox to be a date (try manually typing in a date then click on the date picker button is your date you entered selected in the picker?? - that would give you a clue).

P.s I really need to change my name it's gavsmith as in gavin smith. v not a y :)

Cheers
0
 

Author Comment

by:Washcare
ID: 35139529
Gavin

I am very sorry for getting your name wrong.

Having been trying to implement gurvinder372 suggestions, I stopped looking at the Date feild, and focused on S1, which is a number only feild and S2, which is a text feild, which I wanted to ensure was completed. Both yours and gurvinder372 comments have helped me progress this question.

I am strugglig at the moment with getting the code to check that:

S1 has had numbers only entered and that S2 has had text entered. I can use the code to check each of these states independantly, but not have it check S1, pass and then check S2 and return the user to the form, to add the data. It currently tells the user that S2 is not completed, but submits the data to the database anyway?

Many thanks
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35139598
Can you post the code you are using?
0
 

Author Comment

by:Washcare
ID: 35139825
Your example code:

<script>
    function validateForm() {
        if (form["S2"].length == 0)
       {
          alert("S2 must be filled out");
          return false;
       }
        if (isNaN(form["S1"].value)) {
            alert("not a number");
            return false;
        }
         //put all of your conditions in here
    }
</script>

Or gurvinder372's code:

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

Thanks
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35139913
Yes, but which of the 2 are you trying to use when you say 'it's still submitting the form'? and it look's like you have jumbled up some of mine with gurvinder372's still. Please post all of the code in your page you are currently testing...
0
 

Author Comment

by:Washcare
ID: 35146636
Gavin

Please see the code.

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

<script>
function validateForm(){
        if (isNaN(form["S1"].value)) {
            alert("The field cannot contain letters");
            return false;
        }
        validateFirst();
    }
function validateFirst()
{
var x=document.forms["form"]["S2"].value
if (x.length == 0)
  {
  alert("Name must be filled out");
  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">  
 Name:</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">
  Type:</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">
  CWN:</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="submit" name="button" value="Submit" onclick="return validateForm();"/><font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</font>
</body>
</html>

Open in new window

0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35146803
I see you are using gurvinder372's js code but with my onclick code. There are 2 ways to sort this out either use all of my code:

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

<script>
    function validateForm() {
        if (isNaN(form["S1"].value)) {
            alert("The field cannot contain letters");
            return false;
        }
        if (form["S2"].length == 0) {
            alert("Name must be filled out");
            return false;
        }
        //put all of your conditions in here
    }

</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">  
 Name:</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">
  Type:</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">
  CWN:</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="submit" name="button" value="Submit" onclick="return validateForm();"/><font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</font>
</body>
</html>

Open in new window


or if you want to use gurvinder372's code (there is actually 2 ways to resolve this also:

Either:

 Remove return from from onclick event and change the type to a button

so change:

  <input type="submit" name="button" value="Submit" onclick="return validateForm();"/><font size="2"> </font>

to

  <input type="submit" name="button" value="Submit" onclick="return validateForm();"/><font size="2"> </font>

Open in new window


or

add return before validate first and remove the submit line:

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

Open in new window


The choice is yours

Regards
Gav
0
 
LVL 10

Expert Comment

by:gavsmith
ID: 35146816
sorry my second code example should have been:

so change:

  <input type="submit" name="button" value="Submit" onclick="return validateForm();"/><font size="2"> </font>

to

  <input type="button" name="button" value="Submit" onclick="validateForm();"/><font size="2"> </font> 

Open in new window

0
 

Author Comment

by:Washcare
ID: 35147229
Gavin

Thank you for you patience, please see the code below as to how I have tried to implement your suggestions?

With this code I can:

S1 ABC, S2 Blank - Error Number only format - Returns to form
S1 123, S2 Blank - Error Blank Feild - Returns to form
S1 123, S2 ABC - Submit button does not submit the form to the data base?

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("S2 must be filled out");
  return false;
  }}
</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
 

Author Comment

by:Washcare
ID: 35147281
Gavin

With your code, and the following:

S1 ABC, S2 Blank - Error Number only format, click ok, and I get the following error:

Provider error '80020005'

Type mismatch.

/Comments/add_to_database.asp, line 37


Please see the code:

<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;
        }
        if (form["S2"].length == 0) {
            alert("The S2 must be filled out");
            return false;
        }
        //put all of your conditions in here
    }

</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="submit" 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 10

Accepted Solution

by:
gavsmith earned 1800 total points
ID: 35148756
On your first example you need to submit the form in the js code, corrected code:

<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("S2 must be filled out");
  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


The second example is submitting the form that is why you are getting the error, it's coming from the 'add_to_database.asp' page (because it hasn't been validated). This is because you are missing 'return' in the onclick event corrected code:

<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;
        }
        if (form["S2"].length == 0) {
            alert("The S2 must be filled out");
            return false;
        }
        //put all of your conditions in here
    }

</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="submit" name="button" value="Submit" onclick="return validateForm();"/><font size="2"> </font>
<font size="2"> </font>
	</font></p>
</form>
<!-- End form code -->
</font>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:Washcare
ID: 35148941
Many thanks, for you time and your patience
0

Featured Post

Independent Software Vendors: 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!

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. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

688 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