How to validate multiple input type files using jquery validation module

I use the validator jQuery plugin, I got into a problem while checking images, I have 4 input type files for loading an image (where one is on the page and 3 go dynamically) regarding one movie, image loading is not essential, but if anyone something wants to download, then it must be with valid extension tools, only jpg.jpeg and png imaes are allowed.

I tried many ways, but did not succeed .... please tell me that I am doing the correct verification method, please help me. here is a snippet of code

<script type="text/javascript" type="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<style type="text/css">
    label { width: 10em; float: left; }
    p { clear: both; }
    label.error { 
        float: none;
        color: red;
        padding-left: .5em;
        vertical-align: top;
  } 
    input [type=file] { 
        display:block;
        width: 100%;
        height: 22px;
        margin: 2px 4px;
        border:1px solid grey;
    }
</style>

<form  name="MovieForm" id="MovieForm" action="" method="POST" enctype="multipart/form-data">
    <table border="0" width="100%" align="left" cellpadding="5" cellspacing="5">
        <tr>
            <td width="25%">Movie Name :</td>
            <td width="75%" ><input type="text" name="bizName" id ="movieName"  size="47" value="">
            </td>
        </tr>
        <tr>
            <td >main poster:</td>
            <td ><input type="file" name="mainposter" id="mainposter" size="50" ></td>
        </tr>
        // These all 3 input type=file are coming dynamically through php code
        <tr>
            <td >Additional Poster:</td>
            <td ><input type="file" name="additionalposter1" id="additionalImage1" size="50" ></td>
        </tr>
        <tr>
            <td >Additional Poster (2):</td>
            <td ><input type="file" name="additionalposter2" id="additionalImage2" size="50" ></td>
        </tr>
        <tr>
            <td>Additional Poster (3):</td>
            <td><input type="file" name="additionalposter3" id="additionalImage3" size="50" ></td>
        </tr>
        <tr>
            <td >&nbsp;</td>
            <td>
                <input type="submit" value="Submit" name="submit" class="submit">
                <input type="reset"  class="formbtn" value="clear" name="clear" />
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript"> 
    jQuery(document).ready(function(){
    jQuery('#movieForm').submit(function(){
    //console.log('included latest jQuery');
    var validator=jQuery("#createAdForm").validate({
        rules: {
            movieName: {
                required: true,
                minlength: 2
            }
        },
        messages: {
            movieName: {
                required: "Please write movie name",
                minlength: "Moview name must consist of at least 2 characters"
            }
        },
    });

    jQuery("input[type=file]").bind(function(){
     jQuery(this).rules("add", {
       accept: "png|jpe?g",
       messages: {
         accept :"Only jpeg, jpg or png images"
       }
     });
   });
// 
// How to add this function in validator plugin?

// var ext = jQuery('.additionalImage').val().split('.').pop().toLowerCase();
// var allow = new Array('gif','png','jpg','jpeg');
// if(jQuery.inArray(ext, allow) == -1) {
//     alert('invalid extension!');
// }

});
</script>
+3
source share
1

. Javascript HTML/CSS :

jQuery(document).ready(function () {
    jQuery("#MovieForm").validate({
        rules: {
            bizName: {
                required: true,
                minlength: 2
            }
        },
        messages: {
            bizName: {
                required: "Please write movie name",
                minlength: "Movie name must consist of at least 2 characters"
            }
        }
    });

    jQuery("input[type=file]").each(function() {
        jQuery(this).rules("add", {
            accept: "png|jpe?g",
            messages: {
                accept: "Only jpeg, jpg or png images"
            }
        });
    });
});
+5

Source: https://habr.com/ru/post/1754208/


All Articles