文件上传验证在上传按钮单击时触发，但不在Ok按钮上触发

Question

我正在使用Jquery验证来验证文件上传器，如下所示：

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."
    }
  },
});

问题
单击“上载”按钮后立即触发验证，而不是在选择文件后单击“确定”按钮后触发。我想在选择文件后才触发验证。我也附上了Codepen Link。

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

Answer 1

要创建所需的行为，可以在输入的valid()事件下的表单上调用change，该事件在选择文件后触发。试试这个：

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

Answer 2

请尝试使用简单的jquery函数进行验证和文件类型检查。 在这里我提到相同的新jquery代码。

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