How do I display an error message? -- <select> using jQuery form validation

ron4721
ron4721 used Ask the Experts™
on
Hi,
 I have a form using jQuery validation. The form displays an error message for each required <input> if the user hasn't filled it out. For the <select> items, the form validates, but it doesn't display an error message if the user hasn't selected an item from the from the dropdown. Can you write a rule that would display a message for the two form selects in my form. See attached code. I just want the message to say something like "Please select an item".
Thanks!
form-page.html
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
If you want to use the standard validation, to validate for not filled in or selected, the value has to be empty.

You have value="0"

<select id="state-terr" name="state-terr" class="required" title="Please select a State/Province/Territory.">
  <option value="0" selected="selected">--Select--</option>

So EITHER make that empty OR write a custom validation (could be as simple as testing that selectedIndex <1)
All-around developer
Commented:
Personally, I use the jQuery ValidationEngine plugin. Very easy to use and does this for you.

http://github.com/posabsolute/jQuery-Validation-Engine
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I am sure that validator ALSO needs a custom validator for a select with the first option not empty.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Eddie ShipmanAll-around developer
Commented:
It has many default validation rules.

Author

Commented:
Hi EddieShipman,
I tried adding the jQuery ValidationEngine plugin to my page. So far i got this error in Firefox:

TypeError: form.on is not a function


any ideas?
Thanks.
Eddie ShipmanAll-around developer

Commented:
Nope, what line? Do you have an accessible site where I can look at the source?

Author

Commented:
I put these in my doc:
<script src="/js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

Open in new window


Then, i added this:
<script>
$(document).ready(function(){
        $("#apForm").validationEngine();
});
</script>

Open in new window


I got this error in Firefox:
TypeError: form.on is not a function
(the above error points to this line in the "jquery.validationEngine.js" file)
       
form.on(options.validationEventTrigger, "["+options.validateAttribute+"*=validate]:not([type=checkbox]):not([type=radio]):not(.datepicker)", methods._onFieldEvent);
	form.on("click", "["+options.validateAttribute+"*=validate][type=checkbox],["+options.validateAttribute+"*=validate][type=radio]", methods._onFieldEvent);
	form.on(options.validationEventTrigger,"["+options.validateAttribute+"*=validate][class*=datepicker]", {"delay": 300}, methods._onFieldEvent);

Open in new window



Hope this helps.
Thanks again.
Eddie ShipmanAll-around developer

Commented:
Try this instead:
$("#apForm").validationEngine("attach", {scroll: true});

Open in new window


You need to 'attach' the validation to the form. The scroll option makes the page scroll to the field that has the error.

Author

Commented:
Hi Eddie,
I tried the above, but i still get the same "TypeError: form.on is not a function" error.
Eddie ShipmanAll-around developer

Commented:
What version of validationEngine do you have?
Michel PlungjanIT Expert
Top Expert 2009

Commented:
and do you load jQuery first?
Eddie ShipmanAll-around developer

Commented:
Yeah, forgot that part!!
Eddie ShipmanAll-around developer

Commented:
It may also depend on the version of jQuery that you are using. I see that ValidationEngine version 2.6.1 has that code because I couldn't find that code in my 2.2.version.
Eddie ShipmanAll-around developer

Commented:
Would it be possible for you to mockup a page and post it on jsfiddle?

Author

Commented:
Hi Eddie,
 I'm using version 2.6.2 of Validation Engine. I'll update my jquery to jquery-1.8.2.min.js and see if that works...i'll let you know shortly....
thanks again :)

Author

Commented:
Hi Eddie,
 Yep! I needed to update my jquery to 1.8.2. Now it works!! And it looks great. I like how the email address gets validated without adding any extra script.  Thanks again!!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial