form validation question

[bbolte]

i'm trying to loop through the form elements and break the loop if a field is found empty but can't seem to quite get it to work. following is my function that i call with onSubmit="return validateForm(this);" in the form action. where should the break; be?

function validateForm(f){
	// make sure none are empty
	for (var i = 0; i<9; i++){
		if (f.elements[i].value == ""){
			self.alert("Please fill in the form completely!");
			f.elements[i].focus();
			// if the browser is Netscape 6 or IE
			if(document.all || document.getElementByID){
				// change the color of text field
				f.elements[i].value.style.background = "yellow";
			}
			
			return false;
			break;
		}
	}
}

[Vincent Puglia]

Hi,

This works for me:

<form name="a" onSubmit="return(validateForm(this));" action="javascript:alert('sent')">
<input name="b" type="text">
<input name="c" type="text">
<input type="submit">
</form>

Also, are you trying to set the value's font color or box's background color?

f.elements[i].style.backgroundColor = "yellow";

Any rate, I tend to put the action & submit within my validation routines so that I have better control.

function validateForm(f)
{
var isOk2Send = true;
if (f.elements[i].value == "" )
{
isOk2Send = false;
.....
}
if (isOk2Send)
{
f.action = 'something';
f.submit()
}
else alert('Nothing was sent')
}

and call it either with an image or a button like this:
<input type='button' onclick='validateForm(this.form)' value='Submit'>

Vinny

[bbolte]

Hi,
Also, are you trying to set the value's font color or box's background color?
f.elements[i].style.backgroundColor = "yellow";

yes, box background. it works in some other code i'm using. i'm trying to condense down the js by moving it into a loop, rather than call out an if statement for each field name.

[Vincent Puglia]

Hi Bill,

you might want to change this:

for (var i = 0; i<9; i++){

to this:

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

where 'f' is the form object you pass. That way the code becomes more reusable.

if interested, see the 'Validating Forms' script/tutorial at my site

Vinny
Vinny

[bbolte]

yeah, did that. here's what i ended up with:

function validateForm(f){
	for(var i=0; i<f.elements.length; i++) {
		// check for blank fields
		if (f.elements[i].value == ""){
			alert('All fields must have an entry');
			f.elements[i].focus();
			// if the browser is Netscape 6+ or IE
			if(document.all || document.getElementByID){
				// change the color of text field
				f.elements[i].style.background = "yellow";
			}
			return false;
		}
		// check if user id and password have at least 6 characters
		if (f.elements[i].name == "wbUserid" || f.elements[i].name == "wbPass"){
			if (f.elements[i].value.length < 6){
				alert("Value must have at least 6 characters");
				f.elements[i].value = "";
				f.elements[i].focus();
				// if the browser is Netscape 6+ or IE
				if(document.all || document.getElementByID){
					// change the color of text field
					f.elements[i].style.background = "yellow";
				}
				return false;
			}
		}
		// check for valid e-mail
		if (f.elements[i].name == "Email"){
			if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(f.Email.value))){
				self.alert("Invalid E-mail Address! Please re-enter.");
				f.Email.focus();
				f.Email.select();
				// if the browser is Netscape 6 or IE
				if(document.all || document.getElementByID){
					// change the color of text field
					f.Email.style.background = "yellow";
				}
				return false;
			}
		}
	}
}