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 > </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(){
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"
}
});
});
});
</script>
source
share