4 Replies - 1409 Views - Last Post: 09 September 2012 - 09:34 AM

#1 hugoriffic  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Form Validation Issues

Posted 08 September 2012 - 03:42 PM

For an intro to PHP class we created a simple form to be filled out and then, using javascript, test for valid user input. The code is very simple and basic but I am having issues with it none-the-less. My issues are these:

In IE none of my validation checks work. I can leave the entire form empty, click the submit button, and the form goes through. Not one pop up box asking for correct data.

In Firefox my form checks everything but my state code (it's supposed to force you to choose one state to make it a valid option), my Zip code, and my second password box do not check for validation. I do not need to choose a state, my Zip code will only throw an error message if I leave it blank (it's supposed to check for 5 numerical digits), and my second password field can be anything (doesn't have to match the first password field, which it should).

I have not checked my form out in Chrome as of yet.

My questions are:
1) How come nothing is checked in IE?
2) Why do the state, zip, and second password entries not work in Firefox?
3) Did I check my second password properly? It is supposed to equal whatever is entered into the first password box.

Any, and all, help would be greatly appreciated. Thank you.

Here is my code:
<html>
	<head>
		<title>Pizza Delivery Customer Login Form</title>
		<script type="text/javascript">
		function Validate()
		{
			
			var FirstName = document.getElementById("txtFName");
			var LastName = document.getElementById("txtLName");
			var Email = document.getElementById("txtEmail");
			var Phone = document.getElementById("txtPhone");
			var Address = document.getElementById("txtAddress");
			var City = document.getElementById("txtCity");
			var State = document.getElementById("lstState");
			var ZIP = document.getElementById("txtZip");
			var Password = document.getElementById("txtPassword");
			var Check = document.getElementById("txtPasswordCheck");
			
			if (FirstName.value.length = = 0)
			{
				alert("Please Enter Your First Name.");
				FirstName.focus();
				FirstName.select();
				return false;
			}
			
			if (LastName.value.length = = 0)
			{
				alert("Please Enter Your Last Name.");
				LastName.focus();
				LastName.select();
				return false;
			}
			
			if  (Email.value.indexOf("@") == -1 || Email.value.indexOf(".") == -1)
			{
				alert("Please Enter A Valid Email Address.");
				Email.focus();
				Email.select();
				return false;
			}
			
			var PhoneCheck = /^\(\d\d\d\) \d\d\d-\d\d\d\d$/;
			if (!PhoneCheck.test(Phone.value))
			{
				alert("Please Enter A Valid Phone Number In The Form Of (###) ###-####.");
				Phone.select();
				Phone.focus();
				return false;
			}
			
			if (Address.value.length = = 0)
			{
				alert("Please Enter Your Address.");
				Address.focus();
				Address.select();
				return false;
			}
			
			if (City.value.length = = 0)
			{
				alert("Please Enter Your Home City.");
				City.focus();
				City.select();
				return false;
			}
			
			if (State.selectedIndex == 0))
			{
				alert("Please Select Your Home State.");
				State.focus();
				return false;
			}
			
			if (isNaN(ZIP.value) || ZIP.value.length != 5)
			{
				alert("Please Enter A Valid 5 Digit Zip Code.");
				ZIP.focus();
				ZIP.select();
				return false;
			}
			
			if (Password.value.length = = 0)
			{
				alert("Please Enter Your Password.");
				Password.focus();
				Password.select();
				return false;
			}
			
			if (Check.value != Password.value)
			{
				alert("Please Re-Enter Your Password.");
				Check.focus();
				Check.select();
				return false;
			}
			
			return false;
		}	
			
		</script>
		
		<link href="../styles/PizzaFormLayout.css" rel="stylesheet" type="text/css" >
	</head>
	
	<body>
	<div id="Container">
		<h2 style="text-align: center">Customer Login</h2>
		<div id="Logo">
				<img src="../Images/delivery_man.jpg" alt="logo" width="200px"/>
			</div><!-- End of Logo -->
			<div id="LoginForm">
				<form id="LoginForm" name="LoginForm"
				action="http://itweb.fvtc.edu/responder.php" method="get">
					<div id="FormFields">
						<fieldset>
							<legend>
								Customer
							</legend>
							<label for="txtFName">First Name: </label>
							<input type="text" name="txtFName" id="txtFName" autofocus required />
							<script type="text/javascript">
								// Fallback code for IE immediate autofocus
								if (!("autofocus" in document.createElement("input")))
								{
									document.getElementById("txtFirstName").focus();
								}
							</script>
							<label for="txtLName">Last Name: </label>
							<input type="text" name="txtLName" id="txtLName" required />
							<label for="txtEmail">Email: </label>
							<input type="email" name="txtEmail" id="txtEmail" required />
							<label for="txtPhone">Phone: </label>
							<input type="text" name="txtPhone" id="txtPhone" pattern="\(\d\d\d\) \d\d\d-\d\d\d\d" placeholder="(###) ###-####" required />
						</fieldset>

						<fieldset>
							<legend>
								Address
							</legend>
							<label for="txtAddress">Address: </label>
							<input type="text" name="txtAddress" id="txtAddress" required />
							<label for="txtCity">City: </label>
							<input type="text" name="txtCity" id="txtCity" required />
							<label for="lstState">State: </label>
							<select name="lstState" id="lstState">
								<option selected>Select</option>
								<option value="AK">AK</option>
								<option value="AL">AL</option>
								<option value="AR">AR</option>
								<option value="AZ">AZ</option>
								<option value="CA">CA</option>
								<option value="CO">CO</option>
								<option value="CT">CT</option>
								<option value="DC">DC</option>
								<option value="DE">DE</option>
								<option value="FL">FL</option>
								<option value="GA">GA</option>
								<option value="HI">HI</option>
								<option value="IA">IA</option>
								<option value="ID">ID</option>
								<option value="IL">IL</option>
								<option value="IN">IN</option>
								<option value="KS">KS</option>
								<option value="KY">KY</option>
								<option value="LA">LA</option>
								<option value="MA">MA</option>
								<option value="MD">MD</option>
								<option value="ME">ME</option>
								<option value="MI">MI</option>
								<option value="MN">MN</option>
								<option value="MO">MO</option>
								<option value="MS">MS</option>
								<option value="MT">MT</option>
								<option value="NC">NC</option>
								<option value="ND">ND</option>
								<option value="NE">NE</option>
								<option value="NH">NH</option>
								<option value="NJ">NJ</option>
								<option value="NM">NM</option>
								<option value="NV">NV</option>
								<option value="NY">NY</option>
								<option value="OH">OH</option>
								<option value="OK">OK</option>
								<option value="OR">OR</option>
								<option value="PA">PA</option>
								<option value="RI">RI</option>
								<option value="SC">SC</option>
								<option value="SD">SD</option>
								<option value="TN">TN</option>
								<option value="TX">TX</option>
								<option value="UT">UT</option>
								<option value="VT">VT</option>
								<option value="VA">VA</option>
								<option value="WA">WA</option>
								<option value="WV">WV</option>
								<option value="WI">WI</option>
								<option value="WY">WY</option>
							</select>
							<label for="txtZip">Zip: </label>
							<input type="text" name="txtZip" id="txtZip" placeholder="5 digit ZIP code" required />
						</fieldset>

						<fieldset>
							<legend>
								Security
							</legend>
							<label for="txtPassword">Password: </label>
							<input type="password" name="txtPassword" id="Password" required/>
							<label for="txtPasswordCheck">Re-Enter Password: </label>
							<input type="password" name="txtPasswordCheck" id="PasswordCheck" placeholder="Re-Enter Password" required />
						</fieldset>

					</div><!-- End of Form Fields -->
					<div id="FormButtons">
						<input type="submit" value="Create Account" onclick="return Validate()"/>
						<input type="reset" />
					</div><!-- End of Form Buttons -->
				</form>
			</div><!-- End of Order Form -->
			</div><!-- End of Container -->

	</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Form Validation Issues

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: Form Validation Issues

Posted 08 September 2012 - 04:22 PM

There are a lot of syntax errors in your code. The only reason Firefox is doing any sort of validation is because you are using the HTML5 "required" attribute on your inputs, and unlike IE, Firefox has native support for those. It's validating your fields not based on your Javascript, but based on it's own validation code.

You can use the Error Console in your browser to see the script errors that are preventing your code from running. Once you've dealt with those, then your code might actually run.


One more thing... Your page is missing a Doctype Declaration. No HTML page should be without one! In your case, as you are using HTML5 attributes, you should use the simple HTML5 doctype:
<!DOCTYPE HTML>


This line should be be the very first line in any HTML5 page.
Was This Post Helpful? 1
  • +
  • -

#3 hugoriffic  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: Form Validation Issues

Posted 09 September 2012 - 08:45 AM

Atli,
Thank you so much for your help. I really do appreciate it. Most of the problems were fixed by going through the error console and fixing the mistakes. There are only but a few left. Here are the issues:

In IE everything validates properly up to my first password textbox. If I leave the box blank it gives me an error message. The error message is: Unable to get value of the property 'value': object is null or undefined. Form.htm, line 85 character 4. The thing is I'm checking for a null value and if so displaying a message box to enter a password. Here is the code I have for my first password textbox:
if (Password.value.length == 0)
			{
				alert("Please Enter Your Password.");
				Password.focus();
				Password.select();
				return false;
			}


Shouldn't this work?

In Firefox every field checks for valid input. I'm assuming, like you stated, this is due to the "required" attribute, but my passwords do not need to match. I'm new to javascript and am not sure my code for checking to make sure both passwords match is correct. My code for that is:
if (Check.value != Password.value)
			{
				alert("Please Re-Enter Your Password.");
				Check.focus();
				Check.select();
				return false;
			}


I've searched google for a way to check this and nothing I've come across makes sense. It's all too complicated. I just need to make sure the passwords match. I figured the value of each textbox should work. Obviously not. Could you point me in the right direction??

Thanks again.
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: Form Validation Issues

Posted 09 September 2012 - 09:21 AM

The error message is telling you that the Password variable is undefined, so you can't try to use it's value property. The cause of that isn't on the line it specifies, but on the line where the variable is defined.

In your HTML, your <input> elements for the password and password check fields have the IDs "Password" and "PasswordCheck". However when you try to fetch those fields in your Javascript code (lines 16 and 17), your document.getElementById calls use "txtPassword" and "txtPasswordCheck". That's why the variables are undefined, because those IDs don't exist.
Was This Post Helpful? 1
  • +
  • -

#5 hugoriffic  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: Form Validation Issues

Posted 09 September 2012 - 09:34 AM

Atli,
Good catch!! Thank you. The validations work in both IE and Firefox now. Only issue left is when I click the submit button nothing happens. It should be opening up a page with all the data being submitted showing. the code for that is:
<form id="LoginForm" name="LoginForm" action="http://itweb.fvtc.edu/responder.php" method="get">


Should my last "return false();" on line 101 be a return true??

Forget it. I changed my return to true and it works now. Thank you very much for all your help. I wasn't aware of the error console until you pointed it out. Very much appreciative of your help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1