Jquery validation on fileinput bootstrap plugin

Question

I'm using Fileinput Bootstrap for file input fields. Following is my code:-

HTML

<input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
<input id="input-upload-img2" type="file" class="file" data-preview-file-type="text" name="img2" accept='image/*,video/*'>

Javascript

<script>
    $('#input-upload-img1').fileinput({
        initialPreview: [
            "<img src='img1' class='file-preview-image' alt='Desert'>",
        ]
    });
</script>

So, now I've an initial preview on one of my input field having id input-upload-img1 and no preview on the other input field.

Now I apply jQuery validation of the input field

img1: {
    require_from_group: [1, '.file'],
    accept: "image/*"
},
img2: {
    require_from_group: [1, '.file'],
    accept: "image/*"
}

But, when I submit the form, it still shows the error of saying Atleast 1 field is required. Why is it happening when I've already provided an image in the first input box? Also, If I browse separately again. it will work.

Why jQuery validation is showing error when initial preview field has already been provided.

Following is my dummy code:-

<!DOCTYPE>
<html>
<head>
    <style type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/css/fileinput.min.css"></style>
</head>
<body>
    <form>
        <input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*'>
        <button type="submit">Submit</button>
    </form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/js/fileinput.min.js"></script>
<script type="text/javascript">
    $("#input-upload-img1").fileinput({
        initialPreview: [
            "<img src='http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg' class='file-preview-image' width=20% height=20%>"
        ]
    });

    $('form').validate({
        rules: {
            img1: {
                require_from_group: [1, '.file'],
                accept: "image/*,video/*",
                filesize: 100000000
            }
        }
    })

</script>
</html>

As you can see, there's initially an image in the input field. But when I submit the form, it returns an error saying Please fill at least 1 of these field, since there's no file selected. How can I overcome this?

Here's the jsfiddle. But it somehow doesnt display the initial preview of the image, hence I recommend you to copy-paste this code and run it on your own system.

Seems to work for me. I can't submit the form until I select at least one image: jsfiddle.net/g7ugaejs — Sparky
– Sparky, Commented Jun 9, 2016 at 17:29
That's exactly the problem. I should be allowed to submit the form because an initial preview has already been provided for one of the input file field. — Praful Bagai
– Praful Bagai, Commented Jun 9, 2016 at 19:04
Perhaps you're confused about what the require_from_group rule means. The rule says that at least one field must be completed. As soon as you select a file for upload, the rule is fully satisfied and the form is allowed to submit. Otherwise, I don't understand the issue as you're describing it. — Sparky
– Sparky, Commented Jun 9, 2016 at 19:43
So basically I want that when I've set an initial preview, then jquery-validation should skip the file input required validation. — Praful Bagai
– Praful Bagai, Commented Jun 10, 2016 at 7:23

Sparky · Accepted Answer · 2016-06-07 21:19:04Z

1

I'm using Fileinput Bootstrap for file input fields.

I suspect that the original input element is hidden, therefore, the various user events that would normally trigger validation are not occurring. I'm not familiar with the Fileinput plugin, so you may need to do one or both of the following:

Make sure you have the ignore option set to []. This will ensure that the hidden input elements will be validated no matter what.
You'll need to programmatically trigger validation when you interact with the Fileinput element. If this plugin provides a callback function that will fire whenever a file is selected, put $('[name="img1"], [name="img2"]').valid(); inside of this function.

answered Jun 7, 2016 at 21:19

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Praful Bagai Over a year ago

Well, I read from its Github repo issues, that preview is just a display ... It does not populate the file input. How can I handle this in the code?

Praful Bagai Over a year ago

Since, I'm using require_from_group on the file input field, shall I over-ride this function. Sorry for asking a naive question. I'm not well-versed with the jquery. Request you to please provide a suitable demo. Thanks.

Sparky Over a year ago

@PythonEnthusiast, before asking me to construct a demo, I will ask the same from you. Since I'm not familiar with Fileinput plugin, please provide a jsFiddle demo showing the issue.

Praful Bagai Over a year ago

@sparky- I've updated my question with a dummy demo and the jsfiddle link. Kindly have a look. Thanks

Collectives™ on Stack Overflow

Jquery validation on fileinput bootstrap plugin

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related