Form Validation

Problems with validation returns

Page 1 of 1

13 Replies - 1715 Views - Last Post: 23 September 2007 - 02:01 PM

#1 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Form Validation

Post icon  Posted 16 September 2007 - 10:07 AM

I am trying to validate this form, but I have it set to go to a thank you page once I submit. But, if there are errors on the form, it should not go to the thank you page. It should show the errors on the form. For some reason this is not happening. Can someone tell me what it is that I am doing wrong? Thanks.

<HTML>

<HEAD>
<TITLE>
Customer Mailing List
</TITLE>
<style type=text/css>
h2 {font-family: algerian; font-size: 300%; font-weight: bolder; letter-spacing: 20px; border-style: ridge; border-width: medium;}

.error {font-family: Tahoma; font-size: 8pt;  color: red; margin-left: 50px; display:none;}

</style>


<script Language="Javascript">

function formValidator() {

first = document.getElementById("name").value;
last = document.getElementById("email").value;
street = document.getElementById("street").value;
city = document.getElementById("city").value;
state = document.getElementById("state").value;
zip = document.getElementById("zip").value;
email = document.getElementById("email").value;
phone = document.getElementById("phone").value;




//A check to see if the field is blank
if (first == "")
{
hideAllErrors();
document.getElementById("firstError").style.display = "inline";
document.getElementById("first").select();
document.getElementById("first").focus();
  return false;
  } else if (last == "") {
hideAllErrors();
document.getElementById("lastError").style.display = "inline";
document.getElementById("last").select();
document.getElementById("last").focus();
  return false;
  } else if (street == "") {
hideAllErrors();
document.getElementById("streetError").style.display = "inline";
document.getElementById("street").select();
document.getElementById("street").focus();
  return false;
  } else if (city == "") {
hideAllErrors();
document.getElementById("cityError").style.display = "inline";
document.getElementById("city").select();
document.getElementById("city").focus();
  return false;
  } else if (state == "") {
hideAllErrors();
document.getElementById("stateError").style.display = "inline";
document.getElementById("state").select();
document.getElementById("state").focus();
  return false;
  } else if (zip == "") {
hideAllErrors();
document.getElementById("zipError").style.display = "inline";
document.getElementById("zip").select();
document.getElementById("zip").focus();
  return false;
  } else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
  return false;
  } else if (phone == "") {
hideAllErrors();
document.getElementById("phoneError").style.display = "inline";
document.getElementById("phone").select();
document.getElementById("phone").focus();
  return false;
  }
  return true;
  }
 
  function hideAllErrors() {
document.getElementById("firstError").style.display = "none"
document.getElementById("lastError").style.display = "none"
document.getElementById("streetError").style.display = "none"
document.getElementById("cityError").style.display = "none"
document.getElementById("stateError").style.display = "none"
document.getElementById("zipError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("phoneError").style.display = "none"
  }
</script>








</HEAD>

<BODY>
<CENTER><IMG SRC="kudler.gif"></CENTER>
<H2 align=center>Customer Information</H2>
<FORM onsubmit="return formValidator();" METHOD=POST ACTION="kudler-thanks.htm">



<HR>
<BR>
<BR>
<P><H3>Please fill in the following information and click submit:</H3>
<BR>
<BR>
<BR>
<H5>*First Name: <INPUT TYPE=TEXT id=first SIZE="15" value="">
<BR>
<div class=error id=firstError>Required: Please enter your first name<br></div>
<BR>
<BR>
<BR>
*Last Name: <INPUT TYPE="TEXT" NAME="LAST" SIZE="15" />
<BR>
<BR>
<BR>
*Street Address: <INPUT TYPE="TEXT" NAME="STREET" SIZE="40" /> 
*City: <INPUT TYPE="TEXT" NAME="CITY" SIZE="15" />
*State: <INPUT TYPE="TEXT" NAME="STATE" SIZE="15" />
*Zip: <INPUT TYPE="TEXT" NAME="ZIP" SIZE="5" MAXIMUMLENGTH="5" WIDTH="5" />
<BR>
<BR>
<BR>
*E-Mail Address: <INPUT TYPE="TEXT" NAME="email" SIZE="25" />
<BR>
<BR>
<BR>
Phone Number: <INPUT TYPE="TEXT" NAME="phone" SIZE="25" maxlength="13" />
<BR>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(000-000-0000)
</P></H5>
<BR>
<BR>
<BR>
<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<INPUT TYPE="RESET" VALUE="RESET">
</FORM>
</BODY>

</HTML>



Is This A Good Question/Topic? 0
  • +

Replies To: Form Validation

#2 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Form Validation

Posted 16 September 2007 - 10:15 AM

First questions, if it isn't doing what you want, what is it doing? Is it giving an error?
Was This Post Helpful? 0
  • +
  • -

#3 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Re: Form Validation

Posted 16 September 2007 - 10:21 AM

View PostPsychoCoder, on 16 Sep, 2007 - 10:15 AM, said:

First questions, if it isn't doing what you want, what is it doing? Is it giving an error?


No errors in my webpage. When I hit submit, it goes directly to my thank you page, even if there are errors on the form. In other words, if I leave the form blank, and hit submit, it doesn't display my errors on the form, it goes to the thank you page.
Was This Post Helpful? 0
  • +
  • -

#4 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Form Validation

Posted 16 September 2007 - 10:55 AM

Try to put the function call on your button to see if that makes any difference

<INPUT TYPE="button" VALUE="SUBMIT" onclick="return formValidator();">



Try that and tell me if it makes a difference

NOTE: Remember to remove the function call from your FORM tag
Was This Post Helpful? 0
  • +
  • -

#5 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Re: Form Validation

Posted 16 September 2007 - 10:58 AM

Actually this is working now.......I am not sure what I did that triggered it to work.

But, how would I validate an email address or mailing address? The key word being "or", meaning they can enter one or the other? As I have it now, they would have to enter both.
Was This Post Helpful? 0
  • +
  • -

#6 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Form Validation

Posted 16 September 2007 - 11:09 AM

You could validate for an email address, then if it fails check for a mailing address, or just check for the @ in the email address, then if it don't have that then validate for a mailing address

var to_check = document.getElementById('YourEmailFormElement').value;
var is_email = to_check.indexOf('@');
if (is_email != -1)
 { 
	  //check for valid email
 }
else
	 {
			//check for mailing address
	 }


Was This Post Helpful? 0
  • +
  • -

#7 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Re: Form Validation

Posted 16 September 2007 - 11:44 AM

Thanks so much for all of your help!!!!
Was This Post Helpful? 0
  • +
  • -

#8 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Form Validation

Posted 16 September 2007 - 11:46 AM

No problem princejlynn, thats what we're here for :)
Was This Post Helpful? 0
  • +
  • -

#9 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Re: Form Validation

Posted 16 September 2007 - 12:21 PM

Well......I am not implementing this correctly. It is still requiring the address information, when I put an email address in. Also, is there a better way to do the mailing address? I have posted the new code. Can you take a look, please?

<HTML>

<HEAD>
<TITLE>
Customer Mailing List
</TITLE>
<style type=text/css>
h2 {font-family: algerian; font-size: 300%; font-weight: bolder; letter-spacing: 20px; border-style: ridge; border-width: medium;}

.error {font-family: Tahoma; font-size: 8pt;  color: red; display:none;}

</style>


<script Language="Javascript">




function formValidator() {

var to_check = document.getElementById("email").value;
var is_email = to_check.indexOf('@');

first = document.getElementById("first").value;
last = document.getElementById("last").value;
street = document.getElementById("street").value;
city = document.getElementById("city").value;
state = document.getElementById("state").value;
zip = document.getElementById("zip").value;
email = document.getElementById("email").value;
phone = document.getElementById("phone").value;




//A check to see if the field is blank
if (first == "")
{
hideAllErrors();
document.getElementById("firstError").style.display = "inline";
document.getElementById("first").select();
document.getElementById("first").focus();
  return false;
  } else if (last == "") {
hideAllErrors();
document.getElementById("lastError").style.display = "inline";
document.getElementById("last").select();
document.getElementById("last").focus();
  return false;
  }

	if (is_email != -1){	
	hideAllErrors();
	document.getElementById("emailError").style.display = "inline";
	document.getElementById("email").select();
	document.getElementById("email").focus();
		return false;
	  }
else
	 	if (street == "") {
	hideAllErrors();
	document.getElementById("streetError").style.display = "inline";
	document.getElementById("street").select();
	document.getElementById("street").focus();
		return false;
	  } else if (city == "") {
	hideAllErrors();
	document.getElementById("cityError").style.display = "inline";
	document.getElementById("city").select();
	document.getElementById("city").focus();
		return false;
	  } else if (state == "") {
	hideAllErrors();
	document.getElementById("stateError").style.display = "inline";
	document.getElementById("state").select();
	document.getElementById("state").focus();
		return false;
	  } else if (zip == \d{5}(-\d{4})?) {
	hideAllErrors();
	document.getElementById("zipError").style.display = "inline";
	document.getElementById("zip").select();
	document.getElementById("zip").focus();
		return false;
  }
if (phone == "") {
hideAllErrors();
document.getElementById("phoneError").style.display = "inline";
document.getElementById("phone").select();
document.getElementById("phone").focus();
  return false;
  }

  return true;
  }
 
  function hideAllErrors() {
document.getElementById("firstError").style.display = "none"
document.getElementById("lastError").style.display = "none"
document.getElementById("streetError").style.display = "none"
document.getElementById("cityError").style.display = "none"
document.getElementById("stateError").style.display = "none"
document.getElementById("zipError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("phoneError").style.display = "none"
  }
</script>
</HEAD>

<BODY>
<CENTER><IMG SRC="kudler.gif"></CENTER>
<H2 align=center>Customer Information</H2>
<FORM onsubmit="return formValidator();" METHOD=POST ACTION="kudler-thanks.htm">



<HR>
<BR>
<BR>
<P><H3>Please fill in the following information and click submit:</H3>
<BR>
<BR>
<BR>
<H5>*First Name: <INPUT TYPE=TEXT id=first SIZE="15" value="">
<BR>
<div class=error id=firstError>Required: Please enter your first name<br></div>
<BR>
<BR>
<BR>
*Last Name: <INPUT TYPE=TEXT id=last SIZE="15">
<BR>
<div class=error id=lastError>Required: Please enter your last name<br></div>
<BR>
<BR>
*Street Address: <INPUT TYPE="TEXT" id=street SIZE="40">
<BR>
<div class=error id=streetError>Required: Please enter your street address<br></div>
<BR>
*City: <INPUT TYPE="TEXT" id=city SIZE="15">
<BR>
<div class=error id=cityError>Required: Please enter your city<br></div>
<BR>
*State: <INPUT TYPE="TEXT" id=state SIZE="15">
<BR>
<div class=error id=stateError>Required: Please enter your state<br></div>
<BR>
*Zip: <INPUT TYPE="TEXT" id=zip SIZE="5" MAXIMUMLENGTH="5" WIDTH="5">
<BR>
<div class=error id=zipError>Required: Please enter your zip code<br></div>
<BR>
<BR>
<BR>
*E-Mail Address: <INPUT TYPE="TEXT" id=email SIZE="25">
<BR>
<div class=error id=emailError>Required: Please enter a valid email address<br></div>
<BR>
<BR>
<BR>
Phone Number: <INPUT TYPE="TEXT" id=phone SIZE="25" maxlength="13">
<BR>
<div class=error id=phoneError>Please enter a valid phone number<br></div>
<BR>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(000-000-0000)
</P></H5>
<BR>
<BR>
<BR>
<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<INPUT TYPE="RESET" VALUE="RESET">
</FORM>
</BODY>

</HTML>

Was This Post Helpful? 0
  • +
  • -

#10 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Form Validation

Posted 16 September 2007 - 12:23 PM

OK now I'm confused, if you have a place for email, and a place for an address, why do you need to check if its an email, otherwise if its an address. If you don't want the address to be required, don't check for it?
Was This Post Helpful? 0
  • +
  • -

#11 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Re: Form Validation

Posted 16 September 2007 - 12:27 PM

View PostPsychoCoder, on 16 Sep, 2007 - 12:23 PM, said:

OK now I'm confused, if you have a place for email, and a place for an address, why do you need to check if its an email, otherwise if its an address. If you don't want the address to be required, don't check for it?


I have to have one or the other. If the user does not wish to enter their address, they need to enter their email.
Was This Post Helpful? 0
  • +
  • -

#12 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Re: Form Validation

Posted 16 September 2007 - 12:52 PM

Also, how do I check for more than just the blank fields, using this format. For example, if I wanted to check for appropriate lengths, etc. Can I do this, and how?
Was This Post Helpful? 0
  • +
  • -

#13 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Form Validation

Posted 16 September 2007 - 01:34 PM

Why were you "quoting" yourself?

formObject.length will find the number of characters in a given DOM input element.
Was This Post Helpful? 0
  • +
  • -

#14 princejlynn  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 79
  • Joined: 15-January 07

Re: Form Validation

Posted 23 September 2007 - 02:01 PM

Quote

Please help.......it still isn't working. When I hit submit on a blank form, it continues to straight to the Thank you page, instead of showing me the errors. It has something to do with my email/mail validation code. It was working prior to that. Any assistance would be greatly appreciated. Thanks.


<HTML>

<HEAD> 
<script type="text/javascript" src="cookie.js"></script>
<TITLE>
Customer Mailing List
</TITLE>
<style type=text/css>
h2 {font-family: algerian; font-size: 300%; font-weight: bolder; letter-spacing: 20px; border-style: ridge; border-width: medium;}

.error {font-family: Tahoma; font-size: 8pt;  color: red; display:none;}

</style>
<script Language="Javascript">


//Validation function

function formValidator() {

first = document.getElementById("first").value;
last = document.getElementById("last").value;
emailorMail = document.getElementById("emailorMail").value;
phone = document.getElementById("phone").value;




//A check to see if the name fields are blank
if (first == "")
{
hideAllErrors();
document.getElementById("firstError").style.display = "inline";
document.getElementById("first").select();
document.getElementById("first").focus();
  return false;
  } else if (last == "") {
hideAllErrors();
document.getElementById("lastError").style.display = "inline";
document.getElementById("last").select();
document.getElementById("last").focus();
  return false;
  }


//A check to see if email is present/if not check for mailing address information

var to_check = document.getElementById('emailorMail').value;
var is_email = to_check.indexOf('@') || to_check.indexOf('.');


if (is_email != -1)
{ 
hideAllErrors();
document.getElementById("emailorMailError").style.display = "inline";
document.getElementById("emailorMail").select();
document.getElementById("emailorMail").focus();
  return false;
  } else if (emailorMail.value.indexOf(number.length!=5)) {
hideAllErrors();
document.getElementById("emailorMailError").style.display = "inline";
document.getElementById("emailorMail").select();
document.getElementById("emailorMail").focus();
  return false;
  }

	
//check the length of the telephone number to include dashes if field is not blank

while (phone != ""){

	if (phone.indexOf("-")!=3 || phone.indexOf("-",4)!=7 || number.length!=12) {
	hideAllErrors();
	document.getElementById("phoneError").style.display = "inline";
	document.getElementById("phone").select();
	document.getElementById("phone").focus();
		return false;
	}
}
  return true;
  }


//A function that hides the errors until required 
  function hideAllErrors() {
document.getElementById("firstError").style.display = "none"
document.getElementById("lastError").style.display = "none"
document.getElementById("emailorMailError").style.display = "none"
document.getElementById("phoneError").style.display = "none"
  }

</script>
</HEAD>

<BODY onload="show_clock()">
<CENTER><IMG SRC="kudler.gif"></IMG></CENTER>
<script language="javascript" src="liveclock.js"></script>
<H2 align=center>Customer Information</H2>
<FORM onsubmit="return formValidator();" METHOD=POST ACTION="kudler-thanks.htm">
<HR>
<BR>
<BR>
<P><H3>Please fill in the following information and click submit:</H3>
<BR>
<BR>
<BR>
<H5>First Name: <INPUT TYPE=TEXT id=first SIZE="15" value="">(Required)</H5>
<div class=error id=firstError>Required: Please enter your first name<br></div>
<BR>
<H5>Last Name: <INPUT TYPE=TEXT id=last SIZE="15">(Required)</H5>
<div class=error id=lastError>Required: Please enter your last name<br></div>
<BR>
<H4>Please enter a valid email address or your mailing address:</H4>
<BR>
<BR>
<H5>Email/Mailing Address: (Required)
<BR><TEXTAREA WRAP=SOFT NAME=DESC ROWS=4 COLS=50></TEXTAREA></H5>
<div class=error id=emailorMailError>Required: You must enter a valid email address or mailing address<br></div>
<BR>
<H5>Phone Number: <INPUT TYPE="TEXT" id=phone SIZE="25" maxlength="13">(Optional)</H5>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(000-000-0000)
</P>
<div class=error id=phoneError>Please enter a valid phone number<br></div>
<BR>
<BR>
<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<INPUT TYPE="RESET" VALUE="RESET">
</FORM>
<EMBED SRC="elise.mid" WIDTH=150 LENGTH=50 AUTOSTART="TRUE"></EMBED>
<BR>
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/pBx1Yy5Th5k"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/pBx1Yy5Th5k" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350" AUTOSTART="FALSE"></embed>
</object>
</BODY>
</HTML>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1