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'
    },

You show no form tags in your code above.

Sparky
– Sparky

2013-02-28 23:51:36 +00:00
Commented Feb 28, 2013 at 23:51 — Sparky
– Sparky, Commented Feb 28, 2013 at 23:51

Sparky · Accepted Answer · 2013-08-28 20:58:32Z

15

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/

edited Aug 28, 2013 at 20:58

answered Feb 28, 2013 at 23:57

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lakshganga Over a year ago

Thanks that worked..But it's like soon after the validation,the file upload field vanishes and just the error message is displayed.I need to to display the file upload field too.

lakshganga Over a year ago

moreover,even if i click "no",then also it says that the field is required.

Sparky Over a year ago

@lakshganga, you can add a $("#fup").next('label.error').hide(); to hide the label. See: jsfiddle.net/y5ghU/4

Collectives™ on Stack Overflow

File upload validation with jQuery Validate plugin

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related