如何使用 jquery 启用表单的提交按钮？

Posted 2023-05-09

【中文标题】如何使用 jquery 启用表单的提交按钮？

【英文标题】：How do I enable my form's submit button using jquery?

【发布时间】：2017-05-21 19:32:06

【问题描述】：

我有一个带有一些输入字段和一个下拉列表（选择字段）的基本表单。 几乎所有字段都有一种验证形式。当某个字段出现错误时，该字段旁边会显示一条 CSS 类为“errorText”的错误消息。

默认情况下，我的提交按钮是“禁用”的。一旦所有带有“errorText”CSS类的标签都被隐藏/删除，我想从我的提交按钮中删除“禁用”属性。

我当前的脚本只是在发生错误时隐藏所有带有“errorText”的标签。如何阻止它这样做，以及如何在所有字段都正确输入/验证后启用我的提交按钮？谢谢。

编辑：已解决。代码已更新。

// Field Validations
$('#firstName')
  .on('blur', function() 
    var $this = $(this);
    if ($this.val() == '') 
      $('label[for="firstName"]').addClass('errorText');
      $('#errorFName').show();
     else 
      $('label[for="firstName"]').removeClass('errorText');
      $('#errorFName').hide();
    
  );
$('#lastName')
  .on('blur', function() 
    var $this = $(this);
    if ($this.val() == '') 
      $('label[for="lastName"]').addClass('errorText');
      $('#errorLName').show();
     else 
      $('label[for="lastName"]').removeClass('errorText');
      $('#errorLName').hide();
    
  );
$('#state')
  .on('blur', function() 
    var $this = $(this);
    if ($('#state').val() == "") 
      $('label[for="state"]').addClass('errorText');
      $('#errorState').show();
     else 
      $('label[for="state"]').removeClass('errorText');
      $('#errorState').hide();
    
  );

// Submit Button validation
$('input, select').on('keyup, blur', function() 
  if ($('.errorText:visible').length ||
            $('#firstName' || '#lastName' || '#state').val() == '' ) 
            $('input[type="submit"]').prop('disabled', true);
         else if ($('#firstName').val() != '' &&
            $('#lastName').val() != '' &&
            $('#state').val() != '' ) 
            $('input[type="submit"]').prop('disabled', false);
        
    );

.errorText 
  color: #c4161c;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div>
  <label for="firstName" class="required">First Name</label>
</div>
<div>
  <input type="text" name="firstName" id="firstName" />
</div>
<div class="errorText" id="errorFName" style="display:none;">Please enter a First Name</div>
<br />
<div>
  <label for="lastName" class="required">Last Name</label>
</div>
<div>
  <input type="text" name="lastName" id="lastName" />
</div>
<div class="errorText" id="errorLName" style="display:none;">Please enter a Last Name</div>
<br />

<div>
  <label for="state" class="required">State</label>
</div>
<div>
  <select name="state" id="state">
    <option value="">Select State</option>
    <option value="alabama">Alabama</option>
    <option value="alaska">Alaska</option>
    <option value="arizona">Arizona</option>
    <option value="arkansas">Arkansas</option>
    <option value="california">California</option>
    <option value="etc">etc..</option>
  </select>
</div>
<div class="errorText" id="errorState" style="display:none;">Please select a State</div>
<br />
<input type="submit" class="LargeButton" value="Submit Referral" disabled />

【问题讨论】：

第一个提示：表达式'input' && 'select' 产生字符串'select'。

您的问题应该是“最小而完整的”。问一个特定的问题并显示最少的代码。我不敢回答这个问题，要启用一个按钮，只需 $("#myButton").prop("disabled", false)，因为您无疑会尝试询问 1000 个其他问题，了解您的代码为何不起作用。

我觉得我的问题很直接。一旦验证了所有字段，我想启用我的提交按钮。

你的问题是直截了当的，但这是错误的问题。您启用按钮的方式应该可以工作。您询问的代码的一部分已经很好了。无论如何..将您的条件更改为if ($('.errorText:visible').length)，如果有任何可见的错误，它将返回truthy（1），如果没有，则返回falsy（0）。 $().hide() 不返回任何内容。 $('input, select').keyup 是您使用多个选择器的方式，就像在 css 中一样。

啊，有趣，好的。刚试过这个，它不工作。修复了标签消失的问题，但即使显示错误，提交也会不断启用。

【参考方案1】：

如果有帮助，请使用 data-attribute 检查此更新。我们将label,input,error 分组到div 中并处理错误消息。还简化了对input 和select 元素有效但可以修改的检查。

html

<div>
  <label for="firstName" class="required">First Name</label>
  <input type="text" name="firstName" id="firstName" />
  <span class="errorText" style="display:none;">Please enter a First Name</span>
</div>
<br />
<div>
  <label for="lastName" class="required">Last Name</label>
  <input type="text" name="lastName" id="lastName" />
  <span class="errorText" style="display:none;">Please enter a Last Name</span>
</div>
<br />
<div>
  <label for="state" class="required">State</label>
  <select name="state" id="state" data-valid="">
    <option value="">Select State</option>
    <option value="alabama">Alabama</option>
    <option value="alaska">Alaska</option>
    <option value="arizona">Arizona</option>
    <option value="arkansas">Arkansas</option>
    <option value="california">California</option>
    <option value="etc">etc..</option>
  </select>
  <span class="errorText" style="display:none;">Please select a State</span>
</div>
<br />
<input type="submit" id="submit" class="LargeButton" value="Submit Referral" disabled />

脚本

$(function() 
  $('input,select')
    .on('blur', function() 
      var $this = $(this);
      if ($this.val() == '') 
        $this.data("valid", 'false');
        //find the immediate span with errorText and show it
        $this.next("span.errorText").show();
       else 
        $this.data("valid", 'true');
        $this.next("span.errorText").hide();
      
      checkInputs();
    );
);

function checkInputs() 
  //find all the input and select items where the data attribute valid is present and make an array
  var array = $('input,select').map(function() 
    return $(this).data("valid");
  ).get();
  //if there are not empty or false indicating invalid value set submit property to true
  if (array.indexOf("") == -1 && array.indexOf("false") == -1) 
    $("#submit").prop("disabled", false);
   else 
    $("#submit").prop("disabled", true);
  

css

.errorText 
   color: #c4161c;
   display: block;