File upload validation get trigger on upload button click but not on Ok Button

Question

I am validating File uploader using Jquery Validation like this:

HTML

<form class="getintouch_form" name="Form_Career" action="" id="frm">
  <input type="file" id="fileInput" name="UploadResume" placeholder="Upload Resume">    
  <button class="submitbtn bluebutton" id="BtnSend" type="button">Send</button>
</form>

JQuery

$.validator.addMethod(
  "UploadResume",
  function(value, element) {
    return /\.(doc|docx|pdf)$/i.test(value);
  },
  "Only docx,doc,pdf file formats allow"
);
$("#frm").validate({
  onfocusout: function(element) {
    $(element).valid();
  },
  rules: {
    UploadResume: {
      required: true,
      UploadResume: true
    }
  },

  messages: {
    UploadResume: {
      required: "Resume is mandatory field."
    }
  },
});

Issue
Validation gets fired immediately after I click Upload button and not after I click ok button after selecting file. I want to trigger validation only after I select the file. I've attached Codepen Link as well.

CodePen : https://codepen.io/Ruhard/pen/RgPeQP

@Sparky - My validation works fine. Issue is validation gets trigger on Choose button not on ok button of file dialog box. check the image I've attached — Ubiquitous Developers, Jun 07 '17 at 14:51
Apparently this plugin fails to trigger validation when the file is selected. Please consider filing a report to the developer on his GitHub page. Meanwhile, Rory's answer is a perfectly acceptable workaround that leverages the plugin. — Sparky, Jun 07 '17 at 18:09

Rory McCrossan · Answer 1 · 2017-06-07T07:42:03.197

2

To create the behaviour you require, you can call valid() on the form under the change event of the input, which is fired after a file is selected. Try this:

$('#fileInput').change(function() {
  $('#frm').valid();
});

edited Jun 07 '17 at 07:42

answered Jun 07 '17 at 07:37

Rory McCrossan

331,213
40
305
339

I dont want to submit form on file upload change, As I have other fields on form as well. I just want to trigger validation on file upload dialog box – Ubiquitous Developers Jun 07 '17 at 07:39
In that case call `valid()` on the form. I updated the answer – Rory McCrossan Jun 07 '17 at 07:41
Can't I handle in JQuery Validation any how? Should I need to write extra Code? – Ubiquitous Developers Jun 07 '17 at 07:43
Also, which Code We need to remove to stop this functionality? – Ubiquitous Developers Jun 07 '17 at 07:46
There is nothing wrong with this answer. The plugin does not trigger validation when the file is selected, so creating an event handler to trigger validation on this event is perfectly acceptable, although I would attach `.valid()` to `$(this)` in order to only trigger validation on the file upload field instead of the entire form: https://jsfiddle.net/t2yu4rm1/ – Sparky Jun 07 '17 at 18:08

score 0 · Answer 2 · answered Jun 07 '17 at 10:00

Please try simple jquery function for validation and file type check. Here i mention new jquery code for the same.

 function FileUploadValidation(){
  var allowedFiles = [".doc", ".docx", ".pdf"];
        var fileUpload = $("#fileInput");
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
        if (!regex.test(fileUpload.val().toLowerCase())) {
            alert("Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.");
            return false;
        }        
        return true;
}
$( "#BtnSend" ).click(function() {
        FileUploadValidation();
});
$('#fileInput').bind('change', function() {
       if(!FileUploadValidation())
          $('#fileInput').val();
});

File upload validation get trigger on upload button click but not on Ok Button

2 Answers2