[jQuery] Validate and FileStyle problem. Could someone, please, help me out?
Hello,
I am using JQuery Validate plugin to validate a input of type file.
I am also styling the same input using FileStyle plugin:
http://www.appelsiini.net/projects/filestyle
The error message is added to the HTML markup but it is not visible.
The generated HTML code is:
<label for="Path">Ficheiro</label>
<input class="file" style="display: inline; width: 320px;"/>
<div style="background: transparent url(../Image/FileUpload.jpg)
no-repeat scroll right center; overflow:
hidden; width: 20px; height: 15px; -moz-background-clip: -moz-initial;-
moz-background-origin: -moz-initial; -moz-background-inline-policy: -
moz-initial; display: inline; position: absolute;">
<input id="Path" class="" type="file" value="" name="Path"
style="position: relative; height: 15px; width: 320px; display:inline;
cursor: pointer; opacity: 0; margin-left: -142px;"/>
<label class="Error" for="Path" generated="true">Select a
document</label>
</div>
I am using the following code:
$("input[type=file]").filestyle({
image: "../Image/FileUpload.jpg",
imageheight: 15,
imagewidth: 20,
width: 320
});
$("#Create").validate({
errorClass: "Error",
errorElement: "label",
errorPlacement: function(error, element) {
if (element.is("input[type=file]"))
error.insertAfter(element.next());
else
error.insertAfter(element);
},
rules: {
Path: {
accept: "flv|gif|jpg|png|swf",
required: true
}
},
messages: {
Path: {
accept: "Use only files with the following extensions flv,
gif, jpg, png ou swf",
required: "Select a document"
}
}
});
Could someone, please, help me in solving this problem?
Thanks,
Miguel