Я использую плагин jQuery validator, я столкнулся с проблемой во время проверки изображений, у меня есть 4 типа входного файла для загрузки изображения (где один находится на странице и 3 идут динамически) относительно одного фильма, загрузка изображения не является существенной, но, если кто-то хочет загрузить, тогда это должно быть с действительными средствами расширения, только jpg.jpeg и png imaes разрешены.
я пробовал много, но не получил успеха …. скажите, пожалуйста, что я делаю правильный способ проверки, пожалуйста, помогите мне. здесь есть фрагмент кода
<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 > </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>
Вы были удивительно близки. Вот правильный 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" } }); }); });