I am using the jQuery validation engine plugin by pos-absolute.
I have a plugin that hides a input type="file" and replaces it with a button.
This works fine, if there is not file selected then jquery validation engine not shown popup message, it is submit successfully .
The issue I have is that no popup is shown and not validate file upload field when field is empty.
Here is my hard coded html:
<div class="fileupload fileupload-new" data-provides="fileupload" id="question_choice_image" style="display:none;">
<div class="fileupload-preview thumbnail" id="question_choice_image" style="width: 70px; height: 30px;"></div>
<div >
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" data-validation-engine="validate[required]" data-errormessage-value-missing="Question is required!" name="question_choice_img" /></span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
So the structure is there so I can validate file upload filed .
Instead of hiding it in terms "display:none;" try to make it visible but move it's margin to something like: -9999px.... My solution is: I am setting it absolute and height: 0px; width: 0px; line-height: 0px; font-size:0px; and position it top left within parent container, and I get all my alerts ;)
Trick is not to "hide" original input fields as alerts are not triggerend on display:none fields... Hope it helps....
©2020 All rights reserved.