没有输入文本或下拉选择时禁用提交

Question

下面的代码适用于一个文本框输入“部门名称”。但是，我要求所有输入字段都有数据，并且“ACFTREG”下拉列表（从 Sharepoint 列表中填充）有一个不是默认值“选择”的选择。请注意，此代码将显示在 Sharepoint Online 的 CEWP 中，因此不允许使用表单标签。

$(document).ready(function() {
  var checkField;
  checkField = $("input#departname").val().length;
  var enableDisableButton = function() {
    if (checkField > 0) {
      $('#btnUploadFiles').removeAttr("disabled");
    } else {
      $('#btnUploadFiles').attr("disabled", "disabled");
    }
  }
  enableDisableButton();
  $('input#departname').keyup(function() {
    checkField = $("input#departname").val().length;
    enableDisableButton();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select File: <input type="File" id="inputTypeFiles" required><br />
Departname: <input id="departname" type="textbox" required><br />
Date: <input type="text" id="datepicker" autocomplete="off" name="hidden" required><br />
Filename: <input id="filename" type="textbox" required><br />
ACFTREG:
<select id="ACFTREG" class="select" required>
  <option disabled="disabled" selected="selected">Select</option><br />
  <input type="submit" id="btnUploadFiles" value="Upload" />
</select>

Answer 1

通常您会为此使用form.validate 方法。但正如您所指出的，在 Sharepoint CEWP 中，不可能使用表单元素，因为它呈现的页面已经有一个围绕它的表单元素。并且嵌套的表单元素不能很好地工作。 (source)

您可以检查每个输入/选择字段的有效性，而不是只检查值。如果您要向其添加额外的built in HTML form validation（required、minlength、maxlength 等），这将有好处。由于您使用的是required 属性，因此在您添加值之前，该表单无效。

处理字段验证的事件可以通过每个输入上的blur event 来完成。这意味着当用户点击输入元素时将触发表单验证。

function checkAllFields(fields) {
  return $.map(fields, function(field) {
    return field.checkValidity();
  });
}

$(document).ready(function() {
  var fields = document.querySelectorAll('input,select');
  var submitButton = document.getElementById('btnUploadFiles');

  $(fields).each(function(_, field) {
    field.addEventListener('blur', function() {
      var allFieldsValid = checkAllFields(fields).every(function(value) { return value });
      if (allFieldsValid) {
        $(submitButton).prop('disabled', false);
      } else {
        $(submitButton).prop('disabled', true);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select File: <input type="File" id="inputTypeFiles" required><br />
Departname: <input id="departname" type="textbox" required><br />
Date: <input type="text" id="datepicker" autocomplete="off" name="hidden" required><br />
Filename: <input id="filename" type="textbox" required><br />
ACFTREG:
<select id="ACFTREG" class="select" required>
  <option hidden="hidden" value="" selected="selected" disabled>Select</option>
  <option value="foo">Foo</option>
</select>
<input type="submit" id="btnUploadFiles" value="Upload" disabled />

注意事项：

• 请注意，输入类型提交应在选择元素之外。
• 您不必为此使用 jQuery。这也可以用 ES6 来完成。但是由于问题没有说明使用的是哪个 ES 版本，所以我用 jQuery 示例进行了回答。
• $.eachfunction中的下划线_是跳过索引。您可以省略这两个参数并改用this，但最好具体说明您在那里使用的对象。哪个是“字段”。

Answer 2

尝试在单击按钮时检查所有输入字段，而不是在全部填满后尝试启用它。

$(document).ready(function() {

  $("#btnUploadFiles").click(function() {

    if ($("#departname").val() && $("#datepicker").val() && 
          $("#filename").val() && $("#ACFTREG").val() && 
          $("#inputTypeFiles").val()) {
      console.log("Every field has input");
    }else{
      console.log("Error: All fields are required.");  
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select File: <input type="File" id="inputTypeFiles" required><br /> Departname: <input id="departname" type="textbox" required><br /> Date: <input type="text" id="datepicker" autocomplete="off" name="hidden" required><br /> Filename: <input id="filename"
  type="textbox" required><br /> ACFTREG:
<select id="ACFTREG" class="select" required>
  <option disabled="disabled" selected="selected">Select</option><br />
  <option selected="Option1">Option1</option><br />
  <input type="submit" id="btnUploadFiles" value="Upload" />
</select>