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

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

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

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

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

//现场验证 $‘名字’ .关于'blur'，函数{ var$this=$this； 如果$this.val=={ $'label[for=firstName]'。addClass'errorText'； $'errorFName'。显示； }否则{ $'label[for=firstName]'。删除类'errorText'； $'errorFName'。隐藏； } }; $'lastName' .关于'blur'，函数{ var$this=$this； 如果$this.val=={ $'label[for=lastName]'。addClass'errorText'； $'ErrorName'。显示； }否则{ $'label[for=lastName]'。删除类'errorText'； $'ErrorName'。隐藏； } }; $‘国家’ .关于'blur'，函数{ var$this=$this； 如果$'state'.val=={ $'label[for=state]'.addClass'errorText'； $'errorState'。显示； }否则{ $'label[for=state]'。删除类'errorText'； $'errorState'。隐藏； } }; //提交按钮验证 $“输入，选择”。在“键控，模糊”功能上{ 如果$'.errorText:visible'.length|| $'firstName'| |'lastName'| |'state'。val=={ $'input[type=submit]'。prop'disabled'，true； }如果$'firstName'.val！=&& $'lastName'.val！=&& $'state'.val！={ $'input[type=submit]'。prop'disabled'，false； } }; .errorText{ 颜色：c4161c； } 名字 请输入一个名字 姓 请输入姓氏 状态 选择状态 阿拉巴马州 阿拉斯加州 亚利桑那州 阿肯色州 加利福尼亚 等 请选择一个状态

---

如果有帮助，请使用数据属性检查此更新。我们将标签、输入、错误分组到一个div中，并处理错误消息。还简化了对输入和选择元素有效的检查，但可以修改

html

css

---

如果有帮助，请使用数据属性检查此更新。我们将标签、输入、错误分组到一个div中，并处理错误消息。还简化了对输入和选择元素有效的检查，但可以修改

html

css

---

第一个提示：表达式“input”和“select”的结果是字符串“select”。您的问题应该最少且完整。问一个特定的问题，并展示最少的代码。我不敢回答这个问题，要启用一个按钮，它只是$myButton.propdisabled，false，因为毫无疑问，您将尝试问1000个其他问题，问您的代码为什么不工作。我觉得我的问题非常直截了当。我想在所有字段都经过验证后启用“提交”按钮。YOUR问题是直截了当的，但它是错误的问题。您启用按钮的方式应该可以工作。您询问的代码的一部分已经很好了。无论如何将条件更改为if$'.errorText:visible'.length，如果存在任何可见错误，则返回truthy 1；如果没有，则返回falsy 0。$。隐藏不会返回任何内容。$'输入，选择“.keyup是使用多个选择器的方式，就像在css中一样。啊，很有趣，好的。刚试过这个，它就不起作用了。修复了我的标签消失的问题，但即使显示错误，提交也会持续启用。第一个提示：“输入”和“选择”表达式将导致字符串“选择”。您的问题应尽量少且完整。问一个特定的问题，并展示最少的代码。我不敢回答这个问题，要启用一个按钮，它只是$myButton.propdisabled，false，因为毫无疑问，您将尝试问1000个其他问题，问您的代码为什么不工作。我觉得我的问题非常直截了当。我想在所有字段都经过验证后启用“提交”按钮。YOUR问题是直截了当的，但它是错误的问题。您启用按钮的方式应该可以工作。您询问的代码的一部分已经很好了。无论如何将条件更改为if$'.errorText:visible'.length，如果存在任何可见错误，则返回truthy 1；如果没有，则返回falsy 0。$。隐藏不会返回任何内容。$'输入，选择“.keyup是使用多个选择器的方式，就像在css中一样。啊，很有趣，好的。刚试过这个，它就不起作用了。修复了标签消失的问题，但即使显示错误，提交也会持续启用。

<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);
  }
}

.errorText {
   color: #c4161c;
   display: block;
 }