Question

I am using jQuery validator plugin, i stuck in a problem during validating images, i have 4 input type file to upload image (where one is on page and 3 are coming dynamically)regarding one movie, uploading image is not essential but, if someone wants to upload then it should be with valid extension means only jpg.jpeg and png imaes are allowed ..

i tried many way,but didn’t get success….please tell me that am i doing proper way to validate please help me .
here is 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>

Answer 1

You were amazingly close. Here’s the correct Javascript to match the HTML/CSS in your question:

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