Кнопка «Отправить» после того, как все поля введены в действие

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

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