• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7486
  • 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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

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