如何使用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;
 }