form validation of select field

[tennisbuff]

Hi,

How does one go about using something like "Select an Option" for the first option in a select field, then validating that something was really selected for that field?

Here's a little example I was trying, but it doesn't work right.

http://global-presence.net/test2.htm

For one thing right now it goes ahead and submits either way (how do I prevent that?) Plus when I did have it working so that it didn't go ahead and submit, when the alert came up saying to select a state, the country field's value would return back to "Select a Country".

Any suggestions much appreciated!

Thanks,

 

[scotth4v]

I'd compare the selectedIndex itself, not try to convert the string values, it'll save you a few steps. (possibly avoiding errors too.)

The following works:

function validateForm(){
var i = document.form1.country.options.selectedIndex;
var i2 = document.form1.state.options.selectedIndex;

if (i == 0){  
  alert ("Please select a country");
  document.form1.country.options.focus();
  return false;
  }
else if (i2 == 0){  
  alert ("Please select a state");
  document.form1.state.options.focus();
  return false;
  }
else {
  return true;
}
}

this is checking it manually for each element to select the field when your done, which is fine for 1 or 2 fields, but any more, and I'd put it into an array and loop throught the array of elements to have a single validation routine. Also, your script always went to the next page because the onSubmit needed to check the return value, not just invoke the validation routine... like this:

onSubmit="return validateForm()"

even with that though, your script would only return false if the country was selected but not a state (nested conditional. You'd need to check for both if both are required.

Hope that helps some!

-Scott

 

[scotth4v]

here's the better version using an array (you could just use the document elements array if all of them were select boxes... but this way, just add the names of any select boxes to the list and it will validate them)

function validateForm(){
elem = new Array('country', 'state');
for(var i=0; i < elem.length; i++){
	if(document.form1.elements[elem[i]].options.selectedIndex == 0){
		alert(&quot;please select a &quot; + elem[i]);
		document.form1.elements[elem[i]].focus();
		return false;
	}
	
}

 

[Guest_imported]

Hi,

Thanks very much for your replies. The second one worked, except that I only want it to ask for the state field if the country is Canada or U.S.. I tried the following, but it went through anyway.

http://global-presence.net/test2.htm

Can you see the problem?

Thanks,

 

[scotth4v]

Ahh I gotcha... here ya go...

function validateForm(){
var i = document.form1.country.options.selectedIndex;
var i2 = document.form1.state.options.selectedIndex;
var country = document.form1.country.options[i].value;
if (i == 0){  
  alert ("Please select a country");
  document.form1.country.options.focus();
  return false;
  }
else if ((country == 'Canada' || country == 'United States') && i2 == 0){  
  alert ("Please select a state");
  document.form1.state.options.focus();
  return false;
  }
else {
  return true;
}
}

 

[tennisbuff]

Hi,

It works in I.E.6 and Netscape 4.08, but in Netscape 6.1 and Opera 5.12 it goes ahead and submits after popping up the alert box.

<grrr> The joys of cross-browser scripting.

Any ideas?

 

[scotth4v]

Hahahah, you make me appreciate my job even more, I'm building internal apps in a total MS shop! (I guess that's one plus, eh...)

NS6.01 works if you take out the field focus lines (so the &quot;return false&quot; is immediately after the alert... I don't know of a way to get that to work in NS, Post it here if you figure it out!

Best of luck to ya!

-Scott

 

[tennisbuff]

Hey, thanks a bunch! That's good enough for me.

It seems Netscape takes 2 steps forward and 3 steps back sometimes. :-
Thanks again for your time!