Tech Musings

Wednesday, April 19, 2006

Javascript Validation On Multiple Select Lists

I just spent the better part of today working through a client side javascript validation challenge for our online VISIONS application. My objective was to alert a user when he or she makes a selection(s) (and/or non-selection) from a multiple drop-down select box where the choices are inputted into an array, as well as for a multiple list selection box where the choices are also placed into an array. I wanted to validate their selection to alert them if they forgot to select one of the values, or if they selected the "Other" choice from the select list but forgot to type the "Other" value in the provided text input field.

The validation was not as intuitive as I had hoped. Here's how I finally solved the first issue in the event a user forgets to select a value(s) from the multiple choice drop-down menu:

<--head-->
<--javascript-->
function check() {
if(document.form1["first_choice[]"].value == "")
{alert('Please choose a widget for Question #2!');
return false; }
return true;
}
<--/head-->


<--body-->
<--form name="form1" method="POST" action="action.php" onSubmit="return check();"-->
<--select name="first_choice[]" size="5" multiple-->
<--option value="1">widget 1<--/option>
<--option value="2">widget 2<--/option>
<--option value="3">widget 3<--/option>
<--option value="4">widget 4<--/option>
<--option value="5">widget 5<--/option>
<--/select-->
<--/form-->

For the second issue, I needed to first extract the values from the array to determine what the user selected and then alert the user if he or she selected "Other" from the list but didn't type a value in the provided "Other" text input field.

<--head-->
<--javascript-->
function check() {
{ //validation on value 5 "Other" in the subject array

len = document.form1["subject[]"].length
i = 0
chosen = ""

for (i = 0; i < len; i++) {
if (document.form1["subject[]"][i].selected) {
chosen = chosen + document.form1["subject[]"][i].value
if(chosen == "5" && document.form1.subject2.value =="")
{ alert('You still need to provide your subject area for Question 2!');
document.form1["subject[]"].focus();
return false; }
}
}
}
return true;
}
<--/head-->


<--body-->
<--form name="form 1" method="POST" action="action.php" onSubmit="return check();"-->
<--select name="subject[]" size="5" multiple-->
<--option value="1">Math<--/option>
<--option value="2">English<--/option>
<--option value="3">Science<--/option>
<--option value="4">Social Science<--/option>
<--option value="5">Other<--/option>
<--/select-->
<--input type="text" name="subject_2">
<--/form-->

I was able to "cobble" these client-side solutions together by reviewing a post and article found at the following:
http://homepage.ntlworld.com/kayseycarvey/jss3p10.html
http://forums.whirlpool.net.au/forum-replies-archive.cfm/496087.html

5 Comments:

  • How did you model that "Other" custom field in your database design? e.g. I'm assuming your multi-select list items were each rows in a table...but did that custom value the user could enter go in that same table?

    By Blogger Dan Tanner, at 3:10 PM  

  • Wow! thanks for this post..It helps me a lot..Keep it up!

    By Blogger bevs, at 12:27 AM  

  • I was able to use the method by which you referenced the SELECT element to streamline the validation. It is simple, just to see if anything was selected.

    if (form_name["multiple_select_name[]"].value == "")
    {
    alert("Please choose at least one option.");
    form_name["multiple_select_name[]"].focus();
    return (false);
    }

    By Anonymous Anonymous, at 4:31 PM  

  • I have a question on your second issue. What if the user selected something besides 'other' for example 'Math', and also entered a value in the provided "Other" text input field. How would the validation change to make sure the user selected 'other'?

    By Anonymous Anonymous, at 2:37 PM  

  • Thanks dude, Helped me at time !

    By Anonymous Ganesh D, at 10:14 PM  

Post a Comment

<< Home