File upload validation with jQuery Validate plugin

Question

I have a weird problem.I have a form with a file upload and few other textarea .each and every field is required.so basically when few fields are left blank,the validation works fine but if and only if the file upload is left blank,the form gets submitted.

Here is my code

 <li >
  <p>
    <label for="rad">radio label:
    </label><br>

   <input type="radio" name="rad" value="yes" style="width:20px">&nbsp; Yes&nbsp;&nbsp;</input>
   <input type="radio" name="rad" value="no" style="width:20px">&nbsp; No</input><br/>
   <label for="cv" class="error" style="display:none">This field is required</label>
   </p>
    <p>
    <input type="file" name="fupl" style="display:none;margin-top:10px" id="fup"/>
    <label for="fupl" class="error" style="display:none;color:red">This field is required</label>
    </p>
    </li>
    <br>
    <li>
  <label>checkbox label
  </label><br><br>
 <input type="checkbox" name="cb" value="tick" style="width:20px">&nbsp;&nbsp;   <small>checkbox field<small></input><br>                                          <label for="fee" class="error" style="display:none">This field is required</label>
    </li>
  <br><li>
 <input type="submit" class="button" value="SUBMIT" style="float:right"/>
 </li>
 <script>
 $(document).ready(function()
 {
 $("input[type='radio']").change(function(){
if($(this).val()=="yes")
 {
 $("#fup").show();
 }
else
{
  $("#fup").hide();
 }
});
});

and this my jquery

  $('#form').validate({
rules: {    
fupl: {
    required: true,
    accept:'docx|doc'
    },    

Answer 1

Your code appears to be working just fine. Hidden fields are ignored by the Validate plugin. However, when you show the file upload field via radio button, it will validate and display the error message. See: http://jsfiddle.net/y5ghU/

---

Your code:

<input type="file" name="fupl" style="display:none;margin-top:10px" id="fup"/>

Your file upload field is set to display:none; and the plugin will ignore all hidden fields by default.

Use the ignore: [] option to disable this feature.

$(document).ready(function () {

    $('#form').validate({
        ignore: [],
        rules: {
            fupl: {
                required: true,
                accept: 'docx|doc'
            }
        }
    });

});

DEMO: http://jsfiddle.net/ptV35/

---

EDIT: Not really sure which way the OP wants to go, but the following demo hides any pending error message when the file upload field is re-hidden.

$("#fup").next('label.error').hide();

http://jsfiddle.net/y5ghU/4/