jquery validation engine for file upload validation when i used jasny bootstrap file upload

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 .

Answers:

Answer

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....

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.