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

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
ron4721Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Eddie ShipmanConnect With a Mentor All-around developerCommented:
Personally, I use the jQuery ValidationEngine plugin. Very easy to use and does this for you.

http://github.com/posabsolute/jQuery-Validation-Engine
0
 
Michel PlungjanIT ExpertCommented:
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)
0
 
Michel PlungjanIT ExpertCommented:
I am sure that validator ALSO needs a custom validator for a select with the first option not empty.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Eddie ShipmanConnect With a Mentor All-around developerCommented:
It has many default validation rules.
0
 
ron4721Author 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.
0
 
Eddie ShipmanAll-around developerCommented:
Nope, what line? Do you have an accessible site where I can look at the source?
0
 
ron4721Author 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.
0
 
Eddie ShipmanAll-around developerCommented:
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.
0
 
ron4721Author Commented:
Hi Eddie,
I tried the above, but i still get the same "TypeError: form.on is not a function" error.
0
 
Eddie ShipmanAll-around developerCommented:
What version of validationEngine do you have?
0
 
Michel PlungjanIT ExpertCommented:
and do you load jQuery first?
0
 
Eddie ShipmanAll-around developerCommented:
Yeah, forgot that part!!
0
 
Eddie ShipmanAll-around developerCommented:
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.
0
 
Eddie ShipmanAll-around developerCommented:
Would it be possible for you to mockup a page and post it on jsfiddle?
0
 
ron4721Author 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 :)
0
 
ron4721Author 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!!!
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.

All Courses

From novice to tech pro — start learning today.