javascript - 仅当所有输入字段均为空时才显示错误消息框

Question

我有 4 个文本框，我需要确保在提交之前至少填充了其中一个文本框。

HTML:

<form name="parentForm">
    <input name="pf1" id="pf1" type="text">
    <input name="pf2" id="pf2" type="text">
    <input name="pf3" id="pf3" type="text">
    <button type="button" onClick="submit()">Submit</button>
</form>

Javascript:

function submit()
{
    if ($.trim($("#pf1").val()) === "" || $.trim($("#pf2").val()) === ""  || $.trim($("#pf3").val()) === "")
    {
        alert ('Fields are empty.');
        return false;
    }
...
}

问题是它只有在所有字段都填满的情况下才会提交，在我的例子中，我想要的是如果只有 1 个文本框有数据，我就可以提交表单。

Answer 1

使用 && 运算符代替 || 运算符来检查所有输入。

相反，您可以使用过滤器将空输入的计数与总输入进行比较。如果它们相等，则意味着所有输入字段均为空。

function submit() {
  const emptyInputs = $('input').filter(function() {
    return $(this).val().trim() == "";
  });

  if (emptyInputs.length === $('input').length) {
    alert('Fields are empty.');
    return;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="pf1" id="pf1" type="text">
<input name="pf2" id="pf2" type="text">
<input name="pf3" id="pf3" type="text">
<button type="button" onClick="submit()">Submit</button>