Please Help….Im rippin out my hair here.

@LivinDeadGurlNov 06.2005

Hello,

I have a form that gets validated by using some javascript. Here is what i got

function check_form()
{
var form = document.spform;

for(i=0;i<form.length;i++) { error = form.elements[i]; if(!error.value) { document.write(“errors inthe form “+ error.name);

error.focus;
return false;
}
}
return true;
}
</script>

what im stuck on is, when there is an error in the form, like the user is missing some text fields, it only displays the first field it finds, i want it to display all the fields that are null/empty. i think i need to have a for/foreach??? can anyone please help me with this?

Thanks
Dawn

to post a comment

JavaScript

54 Comments(s) _↴

@TheBearMayNov 06.2005 — #Couple of things could be happening here. The most obvious is that you [i]return[/i] when you find your first error, if you want it to continue you'll have to move the return outside of the for loop.

@LivinDeadGurlauthorNov 06.2005 — #Couple of things could be happening here. The most obvious is that you [i]return[/i] when you find your first error, if you want it to continue you'll have to move the return outside of the for loop.[/QUOTE]

the return is out of the for loop isnt it?

i indented the code and this is what i got.

function check_form()

{

var form = document.spform;

for(i=0;i<form.length;i++)

{

error = form.elements[i];

if(!error.value)

{

document.write("errors inthe form "+ error.name);

error.focus;

return false;

}

}//this closes the for looop right?

return true;

}

@LivinDeadGurlauthorNov 06.2005 — #ok i changed it to this:

function check_form()

{

var frm = true;

var form = document.spform;

for(i=0;i<form.length;i++)

{

error = form.elements[i];

if(!error.value)

{

document.write("errors inthe form "+ error.name);

error.focus;

frm = false;

}

}

return frm;

}

it doesnt return anything til it comes out, but its still only pickin up the first text field.

@LivinDeadGurlauthorNov 07.2005 — #I have tried everything that i can think of with this script. Can someone please help?

here is the new version

<script language="JavaScript">

function check_form(spform)

{

var frm = true;

var form = document.spform;

var reqele = new Array("user","pass","vpass","email","fname","lname","street","apt","city","postal","phone");

for(i=0;i<form.elements.length;i++)

{

if(frm)

{

for(x=0;x<reqele.length;x++)

{

if(form.elements[i].name == reqele[x])

{

if((form.elements[i].value == "") || (form.elements[i].value == null))

{

document.write("The required fields are missing: ""+form.elements[i].name+"" was left blank");

form[i].focus();

frm = false;

}

}

}

}

}

}

</script>

it still only picks up the first element that is empty. i want it to pick up all the empty/null elements

any help would be greatly appreciated.

Dawn

@JPnycNov 07.2005 — #Never tried doing this and haven't tested but you could try adding:

for(x=0;x<reqele.length;x++)

{

if(form.elements[i].name == reqele[x])

{

if((form.elements[i].value == "") || (form.elements[i].value == null))

[COLOR=Red]var message += form.elements[i].getAttribute('name') + ',';[/COLOR]

//then you alert(message), however this assumes that you've given the elements names. You could also put a line break in place of the comma

@JPnycNov 07.2005 — #By the way, you didn't need to create an array. The elements array is native to javascript. You reference it like so : document.forms[0].elements[i];

edit: geez, I must be asleep. I just realized you're iterating through the wrong array. Your for loop needs to be:

for(var i=0;i<form.elements.length;i++)

@LivinDeadGurlauthorNov 07.2005 — #Never tried doing this and haven't tested but you could try adding:

for(x=0;x<reqele.length;x++)

{

if(form.elements[i].name == reqele[x])

{

if((form.elements[i].value == "") || (form.elements[i].value == null))

[COLOR=Red]var message += form.elements[i].getAttribute('attributeName') + ',';[/COLOR]

//then you alert(message), however this assumes that you've given the elements names. You could also put a line break in place of the comma[/QUOTE]

is the getAttribute('attributeName') reserved? or do i need to insert the name or something there?

im going to try it now....... ok it still just returns the one value......got anymore ideas?

@LivinDeadGurlauthorNov 07.2005 — #By the way, you didn't need to create an array. The elements array is native to javascript. You reference it like so : document.forms[0].elements[i];

edit: geez, I must be asleep. I just realized you're iterating through the wrong array. Your for loop needs to be:

for(var i=0;i<form.elements.length;i++)[/QUOTE]

I have two for loops, which one are you referring to?

@JPnycNov 07.2005 — #Sorry I should've said to put 'name' inside the quotes. For now, comment out all references to the array you created. Just use the for-loop for the elements array.

@LivinDeadGurlauthorNov 07.2005 — #Sorry I should've said to put 'name' inside the quotes. For now, comment out all references to the array you created. Just use the for-loop for the elements array.[/QUOTE]

Ok, here is the code::

function check_form(spform)

{

var frm = true;

var form = document.spform;

var reqele = new Array("user","pass","vpass","email","fname","lname","street","apt","city","postal","phone");

for(var i=0;i<form.elements[i].length;i++)

{

if(frm)

{

for(x=0;x<reqele.length;x++)

{

if(form.elements[i].name == reqele[x])

{

 if((form.elements[i].value == "") || (form.elements[i].value == null))
   {
   var message = form.elements[i].getAttribute('attributeName') + ',';
   document.write("The required fields are missing: ""+form.elements[i].name+"" was left blank");
   //document.write("The required fields are missing: ""+form.elements[i].name+"" was left blank");
   form[i].focus();
   frm = false;
   }
   }
   }
   }

}

}

im a little confused on the loop thing again and commenting out all the references.......

@LivinDeadGurlauthorNov 07.2005 — #Sorry I should've said to put 'name' inside the quotes. For now, comment out all references to the array you created. Just use the for-loop for the elements array.[/QUOTE]

ok i did what you suggested here it is:::

<script language="JavaScript">

function check_form(spform)

{

var frm = true;

var form = document.spform;

for(var i=0;i<form.elements.length;i++)

{

if(frm)

{

 if((form.elements[i].value == "") || (form.elements[i].value == null))
   {
   var message = form.elements[i].getAttribute('name') + ',';
   document.write("The required fields are missing: ""+message+"" was left blank");
   //document.write("The required fields are missing: ""+form.elements[i].name+"" was left blank");
   form[i].focus();
   frm = false;
   }
   }
   }
   return frm; 
  }

still only outputs the one value, not all of them......

@JPnycNov 07.2005 — #I'm not able to test this because I don't wanna recreate your whole page, so this will be trial and error.

function check_form(spform)

{

var frm = true;

var form = document.spform;

for(var i=0;i<form.elements[i].length;i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null))

{

var message += form.elements[i].getAttribute('name') + ', ';

document.write("The required fields are missing: ""+message+"" were left blank");

form[i].focus();

frm = false;

}

}

@LivinDeadGurlauthorNov 07.2005 — #ok the only thing that it doesnt like is this:

var message += form.elements[i].getAttribute('name') + ', ';

the += says its an invalid variable initialization

@JPnycNov 07.2005 — #Ok, then to the declarations up top add:

var message;

then get rid of the var in the execution statement.

@JPnycNov 07.2005 — #Oh 1 more thing, form[i].focus() will probably throw an error, since I think you have just 1 form, and the value of i will not be 0 when the function is exited. Should just be form.focus();

@LivinDeadGurlauthorNov 07.2005 — #Ive had enough, im so mad right now...... and frustrated.... i feel lke im going to cry and thats not me lol. anyways here is the code::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript Form</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">

function check_form(spform)

{

var frm = true;

var form = document.spform;

for(var i=0;i<form.elements[i].length;i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null))

{

var message = form.elements[i].getAttribute('name') + ', ';

document.write("The required fields are missing: ""+message+"" were left blank");

form[i].focus();

frm = false;

}

}

return frm;

}

</script>

</head>

<body>

<div id="header">

<h1>Welcome to Splashed Aspect.</h1>

<p>Please fill out the form.</p>

<form name="spform" onSubmit="check_form();">

User Name: <input type="text" name="user">

Password: <input type="password" name="pass">

Verify Password: <input type="password" name="vpass">

Email Address: <input type="text" name="email">

<h3>Personal Information</h3>

First Name: <input type="text" name="fname">

Last Name: <input type="text" name="lname">

Street: <input type="text" name="street">

Apt/Unit: <input type="text" name="apt">

City: <input type="text" name="city">

Postal Code: <input type="text" name="postal">

Province: <select name="province"><option>Alberta</option>

<option>British Columbia</option>

<option>Manitoba</option>

<option>New Brunswick</option>

<option>Newfoundland</option>

<option>Nova Scotia</option>

<option>Ontario</option>

<option>Saskatchewan</option>

</select>

Phone Number: <input type="text" name="phone">

<input type="submit" name="submit" value="submit">

<input type="reset" name="reset" value="reset">

</form>

</div>

</body>

</html>

ive given the complete code..... maybe its something else?

I dont know.......

when you submit the form it does NOTHING lol absolutely nothing. im using firefox for testing and there is no errors in the javascript console. im clueless right now, ive already tried "return check_form()" in the submit button too....

btw i really do appreciate your help too!!!

Dawn

@JPnycNov 07.2005 — #Take it easy, we didn't get to that part yet. You don't have return true; anywhere so naturally it won't submit. And the onsubmit="return check_form()" event belongs in the form tag, not the submit button element. I'm just trying to help you get all the field names 1st. We'll clean up the other stuff afterwards

@JPnycNov 07.2005 — #function check_form(spform)

{

var form = document.spform;

var message;

for(var i=0;i<form.elements.length;i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null))

{

message += form.elements[i].getAttribute('name') + ', ';

document.write("The required fields are missing: ""+message+"" were left blank");

}

form.focus();

return false;

}

else {

return true;

}

}

@JPnycNov 07.2005 — #Also, you really should use an alert for this, since doc.write only writes to a new html doc.

@LivinDeadGurlauthorNov 07.2005 — #Ok,

here it is::

function check_form(spform)

{

var form = document.spform;

var message;

for(var i=0;i<form.elements.length;i++)

{

if((form.elements[i].value == "") || (form.elements[i].value == null))

{

message = form.elements[i].getAttribute('name') + ', ';

alert("The required fields are missing: ""+message+"" were left blank");

form.focus();

return false;

}

else {

return true;

}

}

}

it still only will display the first field it comes to. do you want the link to see it in action?

@JPnycNov 07.2005 — #well I copied your code and didn't notice the plus sign omitted until after I posted it. message must have += after it

message += form.elements[i].getAttribute('name') + ', ';

@JPnycNov 07.2005 — #Also you don't have what i posted there. You left out the {} which is what keeps the loop going. return false and form.focus() should be outside the inner loop.

@LivinDeadGurlauthorNov 07.2005 — #when i put the += i get an alert that says user undefined

why doesnt it pick up the rest of the form fields that are empty?

Dawn

@JPnycNov 07.2005 — #Without the += the message will only = 1 field name. We're trying to build a string using the += and place it in the variable "message".

Hang on, I'll recreate your page and test it here.

@LivinDeadGurlauthorNov 07.2005 — #ok is this right?::

function check_form(spform)

{

var form = document.spform;

var message;

for(var i=0;i<form.elements.length;i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null))

{

message += form.elements[i].getAttribute('name') + ', ';

document.write("The required fields are missing: ""+message+"" were left blank");

}

form.focus();

return false;

}

else {

return true;

}

}

if so, i get errors, syntax error with the else

here if you want to view the source code::

http://webdesign2.georgianc.on.ca/~020085512/Webdesign/forma.htm

@JPnycNov 07.2005 — #I have it returning all the field names now, just need to clean it up some and i'll post it.

@LivinDeadGurlauthorNov 07.2005 — #ok

@JPnycNov 07.2005 — #Sorry, I got sidetracked with a phone call. Here's what I have, and it returns all the field names. user returns as undefineduser, which means you'll probably have to change that one to username.

function check_form(spform) {

var form = document.spform;

var message;

for(var i=0;i<form.elements.length;i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null)) {

message += form.elements[i].getAttribute('name') + ', ';

}

}

alert("The required fields are missing: "+message+" were left blank");

}

Don't change anything, just copy and paste. I have to add the return statements yet so that the form will submit.

@LivinDeadGurlauthorNov 07.2005 — #Ok it works, i changed the user to username, and then to uname, and it still comes back as undefined. im not too sure what to thing now lol. i do know though, that you have helped me soooo much and im sooooo greatful. thanks ?

if you think of why its commin up undefined let me know. im gonna keep working at it. thanks again.

as for the return, where should i input that?

ok so if i input a username, password, and verify password, it picks up the remaining empty fields. and therefor, firstname would be first to list as empty in the alert,..... undefined again. so its not user, its the first field it detects.

@JPnycNov 07.2005 — #I'm still working on getting it perfect. The problem is that the return true usually is an else condition statement and has to be part of the if, but the way we have this function configured it also has to be outside the for loop which isn't possible. I may have to rewrite it.

@JPnycNov 07.2005 — #The select box is the problem now. It returns null whether something is selected or not

function check_form(spform) {

var form = document.spform;

var message;

var bAbort=false;

for(var i=0;i< (form.elements.length-3);i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null)) {

message += form.elements[i].name + ', ';

}

}

{

alert("The required fields are missing: "+message+" were left blank");

bAbort=true; return false;

}

if (!bAbort==true) {

return true;

}

}

edit: by making the select the last element, and subtracting 3 from the elements array, the select can be elminated. You don't need to validate it since there's a selection by default, which means it can't be left blank.

@LivinDeadGurlauthorNov 07.2005 — #would it be safe to not subtract 3? and just have the select have a value? set the value in the <input type blah blah> and just check for a onchange or something along those lines?

thanks for the help too

or give the select an option of <option></option> a null value.?

ok and the undefined is still there. right?

ok so i did that, same thing. im going to try having a null field within the select and see if it takes that.

@JPnycNov 07.2005 — #Well you have a default selection so it CAN'T be left blank. If they don't choose one the default is what they get. Just move the select to the very end, after phone #, then try the code I posted above and let me know if the form submits. You'll need to have return check_form() in the call now.

@LivinDeadGurlauthorNov 07.2005 — #ok and the undefined is still there. right?

ok so i did that, same thing. im going to try having a null field within the select and see if it takes that.

@LivinDeadGurlauthorNov 07.2005 — #ok, im not worried aobut the select right now. ill figure that one out, im just confused on that undefined thing. Im still getting that... got any idea's about it?

@JPnycNov 07.2005 — #No, none, and it's still there even if all the fields are filled. There are no other elements there. That's what I'm still working on. The form won't submit until that's solved.

I should also tell you that you're missing some required form attributes such as action and method.

@TheBearMayNov 07.2005 — #Sorry, I had to step out for a bit. Have we got this solved or where are we?

@LivinDeadGurlauthorNov 07.2005 — #No, none, and it's still there even if all the fields are filled. There are no other elements there. That's what I'm still working on. The form won't submit until that's solved.

I should also tell you that you're missing some required form attributes such as action and method.[/QUOTE]

I had the form action and method in there, but when i went and hit submit, i got an error, saying that the method called does not have those privilages. so i took them out.... ill add them again.

@JPnycNov 07.2005 — #Not quite yet, Mr. May. Still returns "undefined" 1st, before the 1st form element name value. Exactly what it sees as being undefined, I dunno, but even if all fields are filled undefined is present.

@TheBearMayNov 07.2005 — #Do you have a current version of the source I could look at. (Don't want to solve things you've already fixed. ? )

@JPnycNov 07.2005 — #Sure, here's the test page I made from her source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript Form</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript"type="text/javascript">

function check_form() {

var form = document.spform;

var message;

var bAbort=false;

var x=0;

for(var i=0;i< (form.elements.length-3);i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null)) {

message += form.elements[i].getAttribute('name') + ', ';

x++;

}

}

{

alert("The required fields are missing: "+message+" were left blank");

bAbort=true; form.elements[i-x].focus();

return false;

}

if (!bAbort==true) {

return true;

}

}

</script>

</head>

<body>

<div id="header">

<h1>Welcome to Splashed Aspect.</h1>

<p>Please fill out the form.</p>

<form name="spform" action="" method="post"onSubmit="return check_form();">

User Name: <input type="text" name="user">

Password: <input type="password" name="pass">

Verify Password: <input type="password" name="vpass">

Email Address: <input type="text" name="email">

<h3>Personal Information</h3>

First Name: <input type="text" name="fname">

Last Name: <input type="text" name="lname">

Street: <input type="text" name="street">

Apt/Unit: <input type="text" name="apt">

City: <input type="text" name="city">

Postal Code: <input type="text" name="postal">

Phone Number: <input type="text" name="phone">

Province: <select name="province"><option>Alberta</option>

<option>British Columbia</option>

<option>Manitoba</option>

<option>New Brunswick</option>

<option>Newfoundland</option>

<option>Nova Scotia</option>

<option>Ontario</option>

<option>Saskatchewan</option>

</select>

<input type="submit" name="submit" value="submit">

<input type="reset" name="reset" value="reset">

</form>

</div>

</body>

</html>

@JPnycNov 07.2005 — #This isn't how I would've gone about this, but I was trying to use as much of the original function as possible and get that to work.

@TheBearMayNov 07.2005 — #That's generally the way I try to approach it also.

@LivinDeadGurlauthorNov 07.2005 — #ok i fixed the undefined error.... take a wild guess...

I assigned a null value to the message variable::

function check_form() {

var form = document.spform;

[COLOR=Red]var message = "";[/COLOR]

var bAbort=false;

i think it shoudl be ok now... thanks everyone for your help, i really appreciate it.

Dawn

whats the diff using getElementById? and what i have?

ive never used the getElement......

@TheBearMayNov 07.2005 — #I was just getting ready to post that. Good catch.

@TheBearMayNov 07.2005 — #getElementById requires an id="idname" attribute on an element and returns a single element (id's must be unique). So if you had:

<i>
 </i>...
 Last Name: &lt;input type="text" name="lname" id="lname"&gt;

You could retrieve its value using:

<i>
 </i>document.getElementById("lname").value

@LivinDeadGurlauthorNov 07.2005 — #getElementById requires an id="idname" attribute on an element and returns a single element (id's must be unique). So if you had:

<i>
 </i>...
 Last Name: &lt;input type="text" name="lname" id="lname"&gt;

You could retrieve its value using:

<i>
 </i>document.getElementById("lname").value

[/QUOTE]

so after all this headache of this code, would that have been easier? what a learning experience though..

@JPnycNov 07.2005 — #But she wanted to iterate through all the elements which is why I didn't bother with that method.

@TheBearMayNov 07.2005 — #Right. If you have just a couple of elements that you want to check I like the getElementById, but if you want to check every element on a form the other method is easier - also allows you to add or subtract elements without recoding (or with minimal depending on your validation requirements).

@JPnycNov 07.2005 — #Personally I like to call a validation onblur of each txtBox as well as form onsubmit. I don't see the logic in letting them get all the way through the fields and submit, before I tell em they missed a required field. Like the tell em the second they try to leave it.

@TheBearMayNov 07.2005 — #That's a good idea too. The form submit then validate reminds me of some of the old CICS programs I used write for the mainframe.

@JPnycNov 07.2005 — #The function as I last had it for her still doesn't work properly. I expect she'll be back and I will probably suggest the method I would've used in the 1st place.

@JPnycNov 07.2005 — #LOL, Ok, I think I've fixed it. Man this was a convoluted approach.

function check_form() {

var form = document.spform;

var message="";

var x=0;

{

for(var i=0;i< (form.elements.length-3);i++) {

if((form.elements[i].value == "") || (form.elements[i].value == null)) {

message += form.elements[i].getAttribute('name') + ', ';

x++;

}

}

if(x!=0){

alert("The required fields are missing: "+message+" were left blank");

form.elements[i-x].focus();

return false;

}

else {

return true;

}

}

}

@LivinDeadGurlauthorNov 09.2005 — #Hey Guys...

Just wanted to say thanks for all the help you've provided. Been a good learning experience.... thanks again

Dawn

Also in #JavaScript _↴

Cross browser zoom issue Array.push problem Sending POST data with AJAX

Success!

Help @LivinDeadGurl spread the word by sharing this article on Twitter...

Tweet This

Please Help….Im rippin out my hair here.

54 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Please Help….Im rippin out my hair here.

54 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

54 Comments(s) _↴

Also in #JavaScript _↴