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

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

1 个答案: