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

Reply via email to