multiple-select form validation with javascript

baikonur · 10-11-2007, 03:38 PM

dear mr helpman,

i use js to validate a html form. all works well except when i try to check if any one option of a multiple select element has been selected (none selected by default). i really don't know how to address the element in js.

the following code works for text boxes, but not for my multiple=multiple element.

Code:

function kontakt_validate() {
if(document.Formular.field.value == "") {
	alert("not like this);
document.Formular.field.focus();
	return false;
}

any help would by much appriciated,

"baikonur"

Guttorm · 10-12-2007, 03:51 AM

Hi

For multiple selects, you need to go thru all the options and check if they are selected or not. Here is an example:

[HTML]<script type="text/javascript">
function verify(myform) {
var sel = myform.mySelect;
var num = 0;
for ( var i=0 ; i<sel.options.length ; i++ )
if (sel.options[i].selected)
num++;
if (!num) {
alert("Select some numbers please");
sel.focus();
return false;
}
return true;
}
</script>
<form action="#" method="post" onSubmit="return verify(this);">
<select name="mySelect" multiple>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>
<input type="submit">
</form>[/HTML]

baikonur · 10-12-2007, 04:46 AM

Hello Guttorm,

thanks for your help.
however, i can't get it to work.
since i use js only for validation, i am always in big trouble if code doesn't work as expected. maybe you can have a 2nd look?
this is the releveant part of the html/php file:

Code:

			<select id="wideselec" name="Leistungen[]" size="8" multiple="multiple">
			<option value="Beratung zur materiellen Existenzsicherung">Beratung zur materiellen Existenzsicherung</option>
			<option value="Beratung bei Schulden">Beratung bei Schulden</option>

it's necessary in my case to append [] at the end of the name, to be able to handle the array in php. could that be a problem?

this now is how i used your example:

Code:

function kontakt_validate(myform) {
	var sel = myform.Leistungen;
	var num = 0;
        alert("hallo");
	for ( var i=0 ; i<sel.options.length ; i++ )
		if (sel.options[i].selected)
			num++;
	if (!num) {
		alert("Select some numbers please");
		sel.focus();
		return false;
	}
	else {
		alert("boo");
		}
	return true;
}

it doesn't pop up, also setting sel to "document.Formular.Leistungen[]" doesn't help... the code isn't even parsed after that line if i put it like that. (i know that from putting in those alert boxes... sadly enough the only means of "debugging" i know in js) so i assume the square brackets don't belong here in js.
neither one of the alert boxes in "if" or "else" have ever been executed.

baikonur · 10-12-2007, 04:57 AM

ok, it's definetely the name of the multiple field that causes me trouble. if i print the value of the variable "sel" in an alert box i get an "undefined". when trying that with a normal select box i get [object HTMLSelectElement]...
so i guess the square brackets are my problem...

Guttorm · 10-12-2007, 05:53 AM

Yes, when the name contains [], you can't reference it in Javascript that way. But I see you have an id in the select tag - "id="wideselec".

This won't work:
var sel = myform.Leistungen;

I think this will:
var sel = document.getElementById('wideselec');

baikonur · 10-12-2007, 06:53 AM

Quote:

Originally Posted by Guttorm

I think this will:
var sel = document.getElementById('wideselec');

it does!! thank you very much, Guttorm!

i'd like to ask one last question, if you don't mind: can you recommend a good online resource for learning javascript. i know my way around bash, php, html and css quite well, have also peeked into python and had to study c++ at one point. except for c++, i found that for those languages there is better material available for study online than in books. is it like that with js, too?

thanks again!

baik

Guttorm · 10-12-2007, 07:18 AM

Glad to help.

As for studying Javascript, I read the book "Javascript - The definite Guide" by O'Reilly, and I think it's a very good book. It's a bit old now, but I haven't seen anything better. I've seen lots of references online, but no real good tutorial. Maybe someone else knows?

For a language reference site, I like www.gotapi.com. It covers a lot of different languages, including javascript.

baikonur · 10-12-2007, 07:28 AM

yes, language reference is available online, but no good tutorial indeed. thanks for the book recommendation, however... i'll get that one then. (matter of fact, i had it in my hands yesterday when i was in the book store... i was discouraged by its enourmous size, must be 1000 pages or something. well ok, if that is the K&R for javascript, so be it! maybe i'll start using js for more than just validation in the future.)

baik