• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7489
  • Last Modified:

validate drop down select boxes on submit with jquery

Hi,

I'm trying to find out how you can use jQuery validator package to validate drop down select boxes. Say I have a list of countries (see snippet below). I need to make sure that a valid option was selected on submit. I.e. something other than "Select..."


<select name="searchCountry" id="searchCountry">
<option value="">Select country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
....
</select>
								
									<option value="Andorra"
										
									>Andorra</option>

Open in new window

0
vlad_oz
Asked:
vlad_oz
  • 2
  • 2
1 Solution
 
sh0eCommented:

<script>
$(document).ready(function(){
$('form').submit(function(){
  var sel = $('#searchCountry option:selected').val();
  if(sel==''||sel==undefined||sel==null) alert('invalid choice');
});
});
</script>

Open in new window

0
 
vlad_ozAuthor Commented:
Hi sh0e,

Once again, thanks for the quick reply!

I can see how your solution will work, however, I'm after a solution using jquery validate plugin. I'd also need the error messages to be displayed next to the drop down rather than in a popup.

Cheers,
V
0
 
sh0eCommented:
<script>
$(document).ready(function(){
$('form').validate();
});
</script>

<select name="searchCountry" id="searchCountry" class="required">
<option value="">Select country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
....
</select>
0
 
vlad_ozAuthor Commented:
sh0e,
Once again, thanks for your help!
I spent some time googling how to use jQuery validation plugin, there seems to a lot of different ways to have it implemented, yet I couldn't find a single place which would explain all the different options and the best practice of implementing them. Your solution, i.e. class="required" is the simplest.
For everyone else's benefit one of the ways to add error mesages is to have a title attribute added to the select element e.g.
title="Please select a Country" class="required", by default the error messages will appear underneath the select, this behaviour can be changed.
also a good way to indicate to the users what is wrong with the form is to highlight the offending field(s), below is a small <style> snippet which will highlight the field in red. The $('#formid').validate() will then become:
$("#searchForm").validate(
            {
                highlight: function(element, errorClass) {
                    $(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
                }
            }
            );
<style type="text/css">
        form.cmxform { width: 50em; }
 
        form.cmxform label.error {
            margin-left: auto;
            width: 250px;
        }
        form.cmxform input.submit {
            margin-left: 0;
        }
        em.error { color: black; }
        #warning { display: none; }
        select.error {
            border: 1px dotted red;
        }
        </style>

Open in new window

0
 
ravish007Commented:
Keeping value blank as suggested:

<option value="">Select Option</option>

Doesn't seem to work with class="required:true"... is this a but with jquery.validation?  It allows me to submit my form with "Select Option" selected!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now