Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Allow hidden input to be validated #334

posabsolute opened this Issue · 19 comments

6 participants


Scenario: You got some plugin that prettify selec box and etc,

this plugin hide the input making the validationEngine unable to validate it.


Is there any progress on this one? I'm using a script that customizes select boxes and validation on this fields doesn't work...


Not sure which is easier to modify validationEngine or or the plugin (prettify plugin),
but if you modify the plugin, instead of hiding the element, you could position it off screen with absolute positioning (position:absolute; left:-1000px; top:-1000px)


Thanks. Tried that but validation goes off screen (where the field is positioned)...


ahhh, that's right, that would happen. The only other, hacky thing I can think of is visibility:hidden and position the prettified drop down over top, but that's not a very good solution either, have you tried this?. I came across this a while back and I think I decided to just drop the prettified plugin, mostly because of this conflict but also because it's pretty much a hack for form controls.


Yes, that's the solution i've used and it's working pretty well.
Use visibility:hidden for the select box and position the prettified select above the real select using position:absolute.
Thanks for the help!


I had to make this work with Select2, which takes a hidden input and creates a fake dropdown control. I ended up redirecting the .val() method for the fake dropdown to my hidden input using valhooks. The gist explains it better.


hartez (or anyone else),

Would you be willing to share some code (HTML and script) that shows how you got the validationEngine to work with select2?

I've seen a demo where validationEngine works with Chosen and I figured that it should also work with Select2.

I've been struggling with these two plugins and cannot make them work together. Take a look at this fiddle to see what I'm up against,

Thanks for any feedback.


Do you have the latest from both Select2 and ValidationEngine? If so, all I do is this:

$("#mainForm").validationEngine('attach', { prettySelect: true, usePrefix: 's2id_', autoPositionUpdate: true });

Init my Select2 as:

$("#element").select2({ blurOnChange: true });

This basically makes the validationEngine recognize the change asap when you select an option in the Select2.

See here:


@Soupy - You can make it work with a slightly modified version of the gist I posted earlier. The difference in your example is that you're using a 'select' instead of a 'hidden' field as the basis of your dropdown. Here's a fork of your jsfiddle that shows what you need to do:


I guess you did not see my jsfiddle.. I forked yours and fixed it:

See here:


@hartez ... I don't think you need to do all that.. see this jsfiddle:

Does that work for you?


@tzarger - Yeah, that works. And it's way nicer than my solution :)

'usePrefix' and 'prettySelect' weren't in the code when I first had to solve this problem; looks like they're definitely the way to go now. I can't find any mention of them in the documentation, though, which I think is what was confusing @Soupy about your answer above.


@Soupy - if you're interested in how my example works, you might want to check out - that's where I figured out how to do this. It's basically just hijacking the .val() jquery method for the control.

It's an ugly hack, and the solution @tzarger posted is more up-to-date and elegant. You should definitely use that.


Hey tzarger and hartez,

I'm seeing the fiddle and things are definitely looking much better than my original. I have to say "HUGE thank you" for helping me to get this working.


@hartez ... I did not find docs either, but I found a test for the chozen library and figured out how to make it work with Select2 ... I used your valhook in a previous project before I found that, so thank you for posting that it helped for sure!

The blurOnChange was a pull request (feels hacky, but works) I made over that the Select2 project in order to get ValidationEngine to recognize the changes in selection immediately when either adding or removing an item from the Select2 rather than clicking away from it, and the validation message still shows. You can look how when you remove that from the initialization of the select2 in the jsfiddle there is a difference in behavior.

Again, thanks for your work as well, it helped in the past!


hi everyone, the base idea for this feature has been solved, there is 2 demo with different use for select2 and chosen, closing it


I think that I've just found another challenge with Select2 and Validationengine. If I have a Select2 setup to have multiple choices and NO validation specified (i.e., the user has the option to make several choices or no choice at all in the Select2 dropdown) I get the following Script Error when I remove all options from the list. The error happen when I remove the very last option.

Line: 695
Char: 4
Error: "Unable to get property 'length' of undefined or null reference"
Code: 0
URL: ...jquery.validationengine.js

The offending source is:
if(!required && !(field.val()) && field.val().length < 1) options.isError = false;

If I were to add validation[required] to the Select2 and repeat the process (remove all selected options) the error does not happen (and a validation prompt is shown saying that it is a required field).

I would put a fiddle to demonstrate the issue, but, fiddle currently is not working for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.