如果那个或那个条件不满足，那么做

Question

我在一个表单上有 3 个输入文件。如果文件类型与 jpeg、gif、png、bmp 或 pdf 文件扩展名不匹配，或者文件大小大于 2mb，我想disable 提交。我有两个条件工作。

我的问题描述如下：用户提交带有 rar 的上传，提交被禁用，这有效。同样在下一个输入文件上，用户提交了一个大于 2mb 的文件，提交仍然被禁用，没关系。但是，当用户使用小于 2MB 的文件更改该文件时，提交已启用。但是，第一个输入（带有 rar 文件）没有更新。 它不会再次检查所有三个输入文件！！！

所以，我想以这样一种方式设置条件，即所有输入都必须良好才能启用提交，而不仅仅是其中一个。

我尝试使用if (x || y)，但没有奏效。你可以看现场演示here。

function ValidateSize(file) {
  var FileSize = file.files[0].size / 1024 / 1024; // in MB
  var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'pdf', 'bmp'];
  if (FileSize > 2) {
    alert('El archivo excede los 2MB. Prueba a enviarlo con menor tamaño o no podrás enviar la solicitud.');
    // $(file).val(''); //for clearing with Jquery
    $("#submit").attr("disabled", true);
  } else {
    $("#submit").attr("disabled", false);
  }
  if ($.inArray($(file).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
    alert("Solo estos formatos son soportados");
    $("#submit").attr("disabled", true);
  }
}

<input name="cv-becario" class="ewd-otp-file-input" onchange="ValidateSize(this)" type="file" value="" required="">

<input name="certificado-de-notas-becario" class="ewd-otp-file-input" onchange="ValidateSize(this)" type="file" value="" required="">

<input name="titulo-becario" class="ewd-otp-file-input" onchange="ValidateSize(this)" type="file" value="" required="">

Answer 1

在启用/禁用按钮之前，您需要检查所有这些的有效性。

我会修改函数以接收元素并返回 true/false。

然后，不要使用内联 onchange，而是使用 jQuery 事件侦听器并执行以下操作：

var $fileInputs = $('.ewd-otp-file-input').change(function() {
  // filter collection of valid inputs
  var $validInputs = $fileInputs.filter(function() {
    return ValidateSize(this)
  });
  // if lengths match then all are valid
  var isValid = $fileInputs.length === $validInputs.length;
  // enable/disable based on all valid or not
  $("#submit").prop("disabled", !isValid);

});

// function probably needs some fine tuning
function ValidateSize(file) {
   // if empty input is valid ??
   if(!file.files.length){
     return true;
   }

  var FileSize = file.files[0].size / 1024 / 1024; // in MB
  var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'pdf', 'bmp'];
  if (FileSize > 2) {
    console.log('Over 2 meg')
    return false
  } else {
    if ($.inArray($(file).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
      console.log("Solo estos formatos son soportados");
      return false
    } else {
      return true
    }
  }    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="cv-becario" class="ewd-otp-file-input" onchange="ValidateSize(this)" type="file" value="" required=""><br>

<input name="certificado-de-notas-becario" class="ewd-otp-file-input" onchange="ValidateSize(this)" type="file" value="" required=""><br>

<input name="titulo-becario" class="ewd-otp-file-input" onchange="ValidateSize(this)" type="file" value="" required=""><br>

<input name="enviar" id="submit" type="submit" value="submit"><br>

而不是使用 alert() 在函数中做一些额外的工作会让你为每个输入添加/删除错误消息