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 — Hardik Gondalia
– Hardik Gondalia, Commented Jun 7, 2017 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
– Sparky, Commented Jun 7, 2017 at 18:09

Rory McCrossan · Accepted Answer · 2017-06-07 07:42:03Z

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 7, 2017 at 7:42

answered Jun 7, 2017 at 7:37

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

5 Comments

Hardik Gondalia Over a year ago

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

Rory McCrossan Over a year ago

In that case call valid() on the form. I updated the answer

Hardik Gondalia Over a year ago

Can't I handle in JQuery Validation any how? Should I need to write extra Code?

Hardik Gondalia Over a year ago

Also, which Code We need to remove to stop this functionality?

Sparky Over a year ago

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: jsfiddle.net/t2yu4rm1

Rajan Thakkar · Accepted Answer · 2017-06-07 10:00:47Z

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();
});

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related