7 Replies - 447 Views - Last Post: 24 August 2013 - 01:48 PM

#1 ejiroy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 22-February 09

Form Validation

Posted 23 August 2013 - 01:02 PM

I'm trying to figure out why this code won't work. What I'm trying to do is see if a user inputs text into a field. If they don't, then the form is supposed to refresh with the input text box background styled as the color red....This doesn't seem to be working though....

Javascript

			function validatename() 
			{
			    var docform = document.forms["formname"]["fname"];
			    var x = docform.value;
			    if (x == null || x == "") 
				{
			        docform.style.backgroundColor = red;
			    }
			}




HTML

							<form id="form" name="formname" method="post" action="index.html">
								<h3>Signup</h3>
								<label>Name
									<span class="small">Add your name</span>
								</label>
								<input type="text" name="fname" id="name" />
								<label>Email
									<span class="small">Ex:</span>
								</label>
								<input type="text" name="email" id="email" />				
								<label>Name</label>
								<input type="text" name="password" id="password" />
								<button type="submit" value="Submit" onclick="return validatename()" method="post"></button>
							</form>



Any help appreciated

Is This A Good Question/Topic? 0
  • +

Replies To: Form Validation

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3091
  • View blog
  • Posts: 10,359
  • Joined: 12-December 12

Re: Form Validation

Posted 23 August 2013 - 01:16 PM

Red is a string and should be "quoted", otherwise it is 'undefined'. Your browser's console should be displaying an error.
Was This Post Helpful? 0
  • +
  • -

#3 ejiroy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 22-February 09

Re: Form Validation

Posted 23 August 2013 - 04:27 PM

Thanks, didn't realize I missed that....But im having a problem with it going to the index page after I click submit. I'm trying to make sure it refreshes the screen with the red input box, and stays on the same page. It seems to refresh the screen with the red box, but it then immediately goes to the home page. How do I make it stay on the page until the form errors are corrected?

This post has been edited by Dormilich: 24 August 2013 - 12:35 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3091
  • View blog
  • Posts: 10,359
  • Joined: 12-December 12

Re: Form Validation

Posted 23 August 2013 - 04:42 PM

return false; from your validatename function to prevent the form submitting.
Was This Post Helpful? 0
  • +
  • -

#5 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1148
  • View blog
  • Posts: 2,521
  • Joined: 05-May 05

Re: Form Validation

Posted 23 August 2013 - 07:50 PM

Why not let HTML validate for you?
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3470
  • View blog
  • Posts: 9,972
  • Joined: 08-June 10

Re: Form Validation

Posted 24 August 2013 - 12:39 AM

View Postejiroy, on 23 August 2013 - 10:02 PM, said:

			    var x = docform.value;
			    if (x == null || x == "") 


note: form values are never ever null. only Strings, or undefined should the referenced element not be a form control.

besides that == is a type-less check and hence false, 0, '', undefined and null are equivalent.
Was This Post Helpful? 1
  • +
  • -

#7 ejiroy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 22-February 09

Re: Form Validation

Posted 24 August 2013 - 01:24 PM

View PostDormilich, on 24 August 2013 - 01:39 AM, said:

View Postejiroy, on 23 August 2013 - 10:02 PM, said:

			    var x = docform.value;
			    if (x == null || x == "") 


note: form values are never ever null. only Strings, or undefined should the referenced element not be a form control.

besides that == is a type-less check and hence false, 0, '', undefined and null are equivalent.


So are you saying the "==" isn't needed?

Also, Im trying to redirect the page to a confirmation page, and it doesn't seem to be working. I gave my button an id called "buttonID". Then this is my new javascript code, but it doesn't seem to work?

Javascript
			function validatename() 
			{
			    var y = document.getElementById("buttonID").onclick;
				var docform = document.forms["formname"]["fname"];
			    var x = docform.value;
			    if (x == "") 
				{
			        docform.style.backgroundColor = "red";
					return false;
			    }
				else
				{
					y.location.href = "../mywebpage/track confirmation.html";
				}
			}


Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3091
  • View blog
  • Posts: 10,359
  • Joined: 12-December 12

Re: Form Validation

Posted 24 August 2013 - 01:48 PM

[Saying "it doesn't seem to be working" is not very helpful.]

Don't attempt to use the click event of the submit button, use the submit event of the form:

<form id="form" name="formname" method="post" action="index.html" onsubmit="return validatename();">

The form-submission behaviour of a submit-button will happen before the onclick event in most (all?) browsers.

BTW I wouldn't give the form an id of 'form', show a little imagination.

Then correct the submit button - it doesn't have a method attribute (I've also added some text for the button):

<button type="submit" value="Submit">Submit</button>


These lines:
var y = document.getElementById("buttonID").onclick;
y.location.href = "../mywebpage/track confirmation.html";

won't work. Why are you storing the onclick event in a variable? location applies to a window object.

Your function validatename (I suggest validateName) should return true; or false depending on whether you wish the form to be submitted.

This post has been edited by andrewsw: 24 August 2013 - 01:50 PM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1