jquery - 在所有字段都有效后启用提交按钮

Question

我有一个表单，其中包含 3 个带有验证的输入和一个最初禁用的提交按钮。

如果输入为空白，则会显示红色错误消息（验证）。

我想基于红色错误消息，如果没有错误消息，则提交按钮将被启用，但不知何故它不能按预期工作。

jsfiddle

JS

$( "input" ).keyup(function() {
    var value = $( this ).val();
    if (!value) {
        $(this).siblings(".error").addClass('alert-on');
    }
        else {
        $(this).siblings(".error").removeClass('alert-on');
    }
          $('.error').each(function() {
        if(!$(this).hasClass('alert-on')) {
            $('.myButton').removeAttr('disabled');
          return false;
      }
      else {
        $('.myButton').prop('disabled', 'disabled');
      }

   })
  })

HTML

<form>
  <div class="fieldText">
      <input type="text" placeholder="First name*" id="firstname">
      <div class="error">Required</div>
  </div>
    <div class="fieldText">
      <input type="text" placeholder="Last name*" id="lasttname">
      <div class="error">Required</div>
  </div>
  <div class="fieldText">
      <input type="text" placeholder="Company*" id="company">
      <div class="error">Required</div>
  </div>
  <div id="form_submit">
    <button class="myButton" type="submit" disabled="disabled" >
      Submit
    </button>
  </div>
  <p>

  </p>
</form>

CSS

input {
  display: list-item;
  margin-bottom: 10px;
}
.fieldText {
  display: flex;
}
.error {
  display: none;
  color: red;
}
.alert-on {
  display: block;
}

.myButton{
  height: 40px;
  width: 90px;

}
label {
  float: left;
  padding: 20px;
}
#multi-select {
  margin-top: 20px;
}
#form_submit {
  width: 100%;
  float: left;
}

标签： jquery

Answer 1

我给你的例子。你的css和html很好。

jsfiddle

$("input").keyup(function () {
    $("input").each(function (index , el) {
        var value = $(this).val();

        if (!value) {
            $(this).siblings(".error").addClass('alert-on');
        }
        else {
            $(this).siblings(".error").removeClass('alert-on');
        }

        if (value) {
            $('.myButton').removeAttr('disabled');
        } else {
            $('.myButton').prop('disabled', 'disabled');
            return false;
        }
    });
});