Validation problem on select input

I would like to require input on a select dropbox on blur but no error message is appearing when I leave it blank.

Here is part of the form code:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Group Location:</label>
    <select class="cf_inputbox validate-selection" id="select_22" size="1" title="This application is for groups fundraising in Central Oregon ONLY. Please see your local store for participating details."  name="select_22">
    <option value="">Please select one</option>
<option value="Bend, OR">Bend, OR</option>
<option value="Redmond, OR">Redmond, OR</option>
<option value="Central Oregon">Central Oregon</option>

    </select>
    
  </div>

Here is a screen shot of my Validate tab:


What am I missing?
When I test the form, without touching the select box, the form submits with out any issue.
Any feedback would be appreciated.
Thanks!
kevin

Hi kevin,

I dropped your code into a very simple form here and the validation is working OK.

Please post a link to the form so we can take a quick look.

Bob

Thank you Bob.
Here is the link: http://www.pmpizza.com/fundraiser-application.html
Thank you for looking at this.

Hi Kevin,

It looks as though none of the validation is working.

Your template (or some other component) is loading the jQuery JavaScript library. Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest is to add a line of script in the ChronoForms Form JavaScript box:

jQuery.noConflict();

This will free the $ operator which is used by MooTools, so you may need to update your own javascripts to use the longer jQuery operator.

There is also a neat Joomla! system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.

Bob