Avatar of ron4721
ron4721
 asked on

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
jQueryHTML

Avatar of undefined
Last Comment
ron4721

8/22/2022 - Mon
Michel Plungjan

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)
ASKER CERTIFIED SOLUTION
Eddie Shipman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Michel Plungjan

I am sure that validator ALSO needs a custom validator for a select with the first option not empty.
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ron4721

ASKER
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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Eddie Shipman

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

ASKER
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 Shipman

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ron4721

ASKER
Hi Eddie,
I tried the above, but i still get the same "TypeError: form.on is not a function" error.
Eddie Shipman

What version of validationEngine do you have?
Michel Plungjan

and do you load jQuery first?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Eddie Shipman

Yeah, forgot that part!!
Eddie Shipman

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 Shipman

Would it be possible for you to mockup a page and post it on jsfiddle?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ron4721

ASKER
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 :)
ron4721

ASKER
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!!!