Contact Form Errors:

I’m probably overdosing the js again but I can’t get the ids or values of elements I loop through when using get elements by class name. I’m trying to write the info to string variable then write the string to inner html. I got it to work with form 0 elements loop but can’t get id or value with tags looped by class name. Repeat, Repeat:lol::nono:
External.js


//-----------------------------#contact--------------------------//

var contact=document.getElementById('contact');
addEvent(contact,'submit',function(){check();},false);

function check(){
var requierd=document.getElementsByClassName('requierd');
var firstname=requierd[0];
var lastname=requierd[1];
var company=requierd[2];
var email=requierd[3];
var message=requierd[4];
alert(requierd[0].id);//alerts 'firstname'
var gloria=document.getElementById('gloria');
str = 'Contact Form Errors:<br />'
for (i = 0; i < requierd.lenth; i++) 
str += requierd[i].id.toUpperCase() +': '+requierd[i].value + '<br />'
gloria.innerHTML=str;//Reads 'Contact Form Errors:'
alert(str);//Reads 'Contact Form Errors:<br />'
}

Of course I have a long way to go before I can add return values of true and false to make it a real validator but I need the ‘str’ to work. Please let me know if I am way wrong!

Jake The old lady is barking at me now, have to check it out tomorrow. Will let you know. Thanks for the responce. Sorry about my dislexia. Hasta la manyana:mad:

Did you replace the class name in the HTML? :stuck_out_tongue:

Ok so what I’ve done is rewritten the code to be a little more functional. Does it work for you?

function check(){
	var required=document.getElementsByClassName('required');
	var errors = new Array();
	for(i in required){
		if(required[i].value.length == 0){
			errors.push(required[i].id);
		}
	}
	if(errors.length > 0){
		var gloria = document.getElementById('gloria');
		var error = "You have some empty fields to fill in:";
		error += "<ul>";
		for(i in errors){
			error += "<li>" + errors[i] + "</li>";
		}
		error += "</ul>";
		gloria.innerHTML = error;
	}
}

Don’t worry about spelling, I was exactly the same once - I wrote down every programming error I made due to spelling mistakes and made myself type them out in notepad, with word wrap on, until the screen was full. I’d get the hang of it by the end :slight_smile: What a fun time of my life THAT was :stuck_out_tongue:

The above code doesn’t quite work, my JS skills are too rusty nowadays. However this works:

<html>
	<head>
		<script type="text/javascript">
			function check(){
				var required=document.getElementsByClassName('required');
				var errors = new Array();
				for(i = 0; i < required.length; i++){
					if(required[i].value.length == 0){
						errors.push(required[i].id);
					}
				}
				if(errors.length > 0){
					var gloria = document.getElementById('gloria');
					var error = "You have some empty fields to fill in:";
					error += "<ul>";
					for(i = 0; i < errors.length; i++){
						error += "<li>" + errors[i] + "</li>";
					}
					error += "</ul>";
					gloria.innerHTML = error;
				}
			}
		</script>
	</head>
	<body>
		<form>
			<input type="text" class="required" id="steve" />
			<input type="text" class="required" id="dave" />
			<input type="text" class="required" id="jimmy" />
		</form>
		<button onClick="check()">Check</button>
		<div id="gloria"></div>
	</body>
</html>

The correct class name would be “required”, which you might want to correct at some point but, if it’s working, don’t worry about until you’ve fixed your issue.

Though I believe your issue is:

for (i = 0; i < requierd.lenth; i++) 

It’s spelt “length”; ‘lenth’ won’t be a property, therefore it won’t iterate.

Thanks Jake Bug eyed as I am I did notice the ‘lenth’ so I’ll do a spell check though I’m sure the class = has the same spelling error I’ll check it out to be sure. Yeah I miss spelled it all the way through so it shouldn’t be a problem. Wierd, I thought I had used word to spell check that.
Done. Now alert required 0 id is firing null! so I guess you can’t get the id of an element you got by class name index? Wierd, developer tools lists the id of each element found so there must be a way to use var firstname equals reqired 0 var second equals required 1 etc. to put into an array say array required then get the id and value of each to str to put in inner html?
EG.


var contact=document.getElementById('contact');
addEvent(contact,'submit',function(){check();},false);

function check(){
var required=document.getElementsByClassName('required ');
var firstname=required[0];
var lastname=required[1];
var company=required[2];
var email=required[3];
var message=required[4];
var required=required[firstname,lastname,company,email,message];//no!
var gloria=document.getElementById('gloria');
str='Contact Form Errors:<br />'
for(i = 0; i < required; i++)//length returns null 
str+=required[i].id.toUpperCase() +': '+required[i].value + '<br />'
gloria.innerHTML=str;//Reads 'Contact Form Errors:'
alert(str);//Reads 'Contact Form Errors:<br />'
}

Wow it’s not working on the array :p:sick::injured:

To do that, just return false in the form handling. If a function tied to your form’s submission returns false, it should prevent it from submitting (unless the user has JS off of course)

Wow JAKE that works and I’m trying to understand why the required i value length and required i id work in yours and I can only see that there is one thing missing in my original script ‘required i value length’ being declared. Thanks though. It works great and now I have to get the form to stop posting when there is a ul created. Will post back with final script. Muchos Mas Gracias a Te.:wink:

Roger that last comment Jake Arkinstall just realized that mailto is the exception to that rule in IE8 anyway and will always post allowing you to confirm or deny so I had to disable the submit button untill the form was complete. Thanks again for all your help.