Form Validation

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

WashcareAsked:
Who is Participating?
 
gavsmithConnect With a Mentor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
Gurvinder Pal SinghCommented:
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
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
WashcareAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
replace line 10 by

if (x.length == 0)

and add this line after line 14

document.forms["myForm"].submit();
0
 
WashcareAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
<< 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
 
gavsmithCommented:
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
 
gavsmithCommented:
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
 
gavsmithCommented:
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
 
gavsmithCommented:
Should have mentioned... to test the above make sure you put some random letters in the S2 field before clicking submit
0
 
WashcareAuthor Commented:
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
 
Gurvinder Pal SinghConnect With a Mentor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
gavsmithCommented:
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
 
gavsmithCommented:
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
 
WashcareAuthor Commented:
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
 
WashcareAuthor Commented:
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
 
gavsmithCommented:
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
 
WashcareAuthor Commented:
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
 
gavsmithCommented:
Can you post the code you are using?
0
 
WashcareAuthor Commented:
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
 
gavsmithCommented:
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
 
WashcareAuthor Commented:
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
 
gavsmithCommented:
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
 
gavsmithCommented:
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
 
WashcareAuthor Commented:
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
 
WashcareAuthor Commented:
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
 
WashcareAuthor Commented:
Many thanks, for you time and your patience
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.