How do I validate if a file is selected for upload before submitting a form , using jquery validator

Question

I have a page in my web application where there is an option to upload a file. I am trying to validate if there is a file selected for upload, before submitting the form. I use jQuery form validator plugin for my form validations.

My html code for the file input tag is:

<div class="form-group">
 <label for="exampleInputFile">New File</label>
 <input type="file" id="file_add" name="file">                                         
</div>

I am trying to check if there is any file selected using the following code:

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
      if($('#addFile').val() == "")
        return $('#file_add').val() == "" == 0;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
    });

But the form submission is still happening even if there is no file chosen for upload. Is there any way I can check if there is a file selected before the submission happens.....

Answer 1

From the link you gave, there's dedicated File Validation section on the right pane of that page: http://formvalidator.net/#file-validators

I have not used this validator plugin before. That being said, based on this example , I believe your code should be like this:

HTML:

<div class="form-group">
 <label for="file_add">New File</label>
 <input type="file" id="file_add" name="file" data-validation="file_check">                                         
</div>

That is, I added the data-validation attribute to it, with our custom validation's name.

jQuery:

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
        if(value.trim() == "") // the "value" variable will have the value
          return false;
        else
          return true;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
});

I just handwritten this code based on the example, so it's untested. I guess it will help.

Answer 2

You can use something like this:

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
        var value = $('#file_add').val();
        if(value.trim() == "") 
          return false;
        else
          return true;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
    });

Also in you html code, add the name of the validator and an error message to be displayed:

<div class="form-group">
<label for="exampleInputFile">New File</label>
<input type="file" id="file_add" name="file" data-validation="file_check" data-validation-error-msg="Choose An Image File To Upload" >                                         
</div>  

This should work perfect