在 preventDefault 之后重新启用提交

Question

我有以下html表单：

<form id="searchForm" action="/pages/index" accept-charset="UTF-8" method="get">
   <input id="toValidate" type="text" name="search_form[mixed]"></div>
   <input id="toValidate" type="text" name="search_form[first_name]"></div>
   <select name="search_form[state]">
      <option selected="selected" value="All">All</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="WY">Wyoming</option>
   </select>
   <input type="submit" name="commit" value="SEARCH" id="submit" data-disable-with="SEARCH">
</form>

我想让用户至少输入一个输入字段。我认为他们这样做的方式是使用以下 Javascript 代码：

function checkFields(form) {
    var inputs = form.find('toValidate').not('[type="submit"],[type="button"],[type="reset"]'); 

    var filled = inputs.filter(function(){
        return $.trim($(this).val()).length > 0;
    });
    
    if(filled.length === 0) {
        return false;
    }
    
    return true;
}

$(function(){
    $('#searchForm').on('submit',function(e){
        var oneFilled = checkFields($(this));
        if (oneFilled) {
            alert('At least ONE field filled!');
        } else {    
            e.preventDefault();
            if (confirm('NO FIELDS FILLED OUT!')){
                $('#submit').disabled = false;
            }else{
                $('#submit').disabled = false;
            }
        }
    });
});

preventDefault() 函数禁用了提交按钮，但是一旦我提醒用户，我就无法再次重新启用该按钮。不过这很有趣，因为当我将代码 $('#submit').disabled = false; 粘贴到控制台上时，它会重新启用该按钮。那我应该怎么做才能重新启用 JS 代码中的按钮呢？

从用户的角度来看：

当 preventDefault();它被称为按钮被禁用，然后，一旦用户接受确认窗口，她就无法再次提交表单，因为按钮被禁用。在接受确认窗口并且用户可以单击“搜索”按钮后，如何使该按钮再次启用。

谢谢。

Answer 1

您的代码有几个问题：

• 您根本不需要禁用提交按钮。 e.preventDefault() 禁用表单的提交，所以当字段没有填写时，调用它，当它们填写时，不要调用它。
• 您的两个输入字段都有id="toValidate"，并且在checkFields 函数中，您发现form.find('toValidate') 的输入字段不正确。您需要将这些输入字段的类设置为toValidate，而不是它们的ID，因为两个或多个元素的ID不能相同。
• 选择器form.find('toValidate') 实际上既不能使用ID 也不能使用类，因为它正在寻找带有标签 <toValidate> 的元素。对于查找具有 IDs 文本的元素，选择器将是 form.find('#toValidate')，而对于查找具有 classes 文本的元素，它将是 form.find('.toValidate')。我们将在下面的代码中使用后者。
• 您禁用提交按钮是一种比不正确的做法更糟糕的做法。 禁用提交按钮并不意味着用户不能提交表单。 用户甚至可以通过按回车键提交表单。

在下面的 sn-p 中，当您提交表单时，它会检查字段是否已填写。如果未填写，则调用e.preventDefault()，如果至少填写了一个，则不会调用e.preventDefault()，这将导致表单提交（并重新加载页面）。

function checkFields(form) {
    var inputs = form.find('.toValidate').not('[type="submit"],[type="button"],[type="reset"]'); 

    var filled = inputs.filter(function(){
        return $.trim($(this).val()).length > 0;
    });
    
    if(filled.length === 0) {
        return false;
    }
    
    return true;
}

$('#searchForm').on('submit',function(e){
      var oneFilled = checkFields($(this));
      if (oneFilled) {
          alert('At least ONE field filled!');
      } else {    
          e.preventDefault();
          alert('NO FIELDS FILLED OUT!');
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="searchForm" action="/pages/index" accept-charset="UTF-8" method="get">
   <input class="toValidate" type="text" name="search_form[mixed]"></div>
   <input class="toValidate" type="text" name="search_form[first_name]"></div>
   <select name="search_form[state]">
      <option selected="selected" value="All">All</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="WY">Wyoming</option>
   </select>
   <input type="submit" name="commit" value="SEARCH" id="submit" data-disable-with="SEARCH" />
</form>