Solved

Form Validation

Posted on 2011-03-15
29
283 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
  • 12
  • 11
  • 6
29 Comments
 
LVL 40

Expert Comment

by:gurvinder372
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:gurvinder372
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
 
LVL 40

Expert Comment

by:gurvinder372
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:gurvinder372
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:gurvinder372
gurvinder372 earned 50 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:gurvinder372
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

743 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

13 Experts available now in Live!

Get 1:1 Help Now