Как проверить несколько файлов типа ввода с плагином JQuery валидатор

Question

Я использую плагин валидатора jQuery, я застрял в проблеме при проверке изображений, у меня есть 4 файла типа ввода для загрузки изображения (где один находится на странице и 3 идут динамически) относительно одного фильма, загрузка изображения не важна, но, если кто-то хочет загрузить, то это должно быть с допустимым расширением, означает, что разрешены только изображения jpg.jpeg и png ..

я пробовал много раз, но не добился успеха .... пожалуйста, скажите мнея делаю правильный способ проверки, пожалуйста, помогите мне.вот фрагмент кода

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

Answer 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"
            }
        });
    });
});