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

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

相反，您可以使用filter将空输入的计数与总输入进行比较。如果它们相等，则表示所有输入字段均为空。

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>

Answer 2

在所有输入上进行循环，如果至少有一个不同于空的提交：

$("input").each(function(){
    if($(this).val() != ""){
         // submit
    }
})

Answer 3

如果仅一个字段必须填充值，请将您的或更改为和

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

仅在所有输入字段为空时显示错误消息框

3 个答案: