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

Question

下面的代码适用于一个文本框输入 'departname'。但是，我要求所有输入字段都有数据，并且 'ACFTREG' 下拉列表（从 Sharepoint 列表中填充）有一个不是默认值 'select' 的选择。请注意，此代码将显示在 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

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

$(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>

Answer 2

通常您会为此使用 form.validate 方法。但是正如您指出的那样，在 Sharepoint CEWP 中，不可能使用表单元素，因为它呈现的页面已经有一个表单元素围绕着它。嵌套的表单元素效果不佳。 (source)

您可以检查每个 input/select 字段的有效性，而不仅仅是检查值。如果您向其中添加额外的 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 />

备注：

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

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

Disable submit when no input text or dropdown selection

html

javascript

jquery

sharepoint-online