Javascript Validation On Multiple Select Lists
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 Dan Tanner, at 3:10 PM
Wow! thanks for this post..It helps me a lot..Keep it up!
By 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, 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, at 2:37 PM
Thanks dude, Helped me at time !
By Ganesh D, at 10:14 PM
Post a Comment
<< Home