Databases
StackOverflow2013
Postsdbo
POhow to validate multiple input type files with jquery validator plugin
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to validate multiple input type files with jquery validator plugin
    text
    copied!<p>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 .. </p> <p>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</p> <pre><code>&lt;script type="text/javascript" type="js/jquery-1.4.2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.validate.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; 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; } &lt;/style&gt; &lt;form name="MovieForm" id="MovieForm" action="" method="POST" enctype="multipart/form-data"&gt; &lt;table border="0" width="100%" align="left" cellpadding="5" cellspacing="5"&gt; &lt;tr&gt; &lt;td width="25%"&gt;Movie Name :&lt;/td&gt; &lt;td width="75%" &gt;&lt;input type="text" name="bizName" id ="movieName" size="47" value=""&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt;main poster:&lt;/td&gt; &lt;td &gt;&lt;input type="file" name="mainposter" id="mainposter" size="50" &gt;&lt;/td&gt; &lt;/tr&gt; // These all 3 input type=file are coming dynamically through php code &lt;tr&gt; &lt;td &gt;Additional Poster:&lt;/td&gt; &lt;td &gt;&lt;input type="file" name="additionalposter1" id="additionalImage1" size="50" &gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt;Additional Poster (2):&lt;/td&gt; &lt;td &gt;&lt;input type="file" name="additionalposter2" id="additionalImage2" size="50" &gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Additional Poster (3):&lt;/td&gt; &lt;td&gt;&lt;input type="file" name="additionalposter3" id="additionalImage3" size="50" &gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt; &lt;input type="submit" value="Submit" name="submit" class="submit"&gt; &lt;input type="reset" class="formbtn" value="clear" name="clear" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; 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!'); // } }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload