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

Question

我有一个带有一些输入字段和下拉列表（选择字段）的基本表单。 几乎所有领域都有一种验证形式。 当字段有错误时，字段旁边会显示带有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 /> 

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