Отключить - включить кнопку «Отправить» для нескольких заливок

Question

У меня есть несколько типов заполнения, таких как ввод, выбор опции ... и проверки. Кнопка «Отправить» сначала будет отключена. Каждый раз, когда я вхожу в поле, функция проверки будет работать сразу же.

После того, как каждое поле заполнено корректным вводом, я хочу включить кнопку отправки. (но почему-то мой код кнопки включения выдает предупреждение при первой загрузке, поэтому я прокомментировал этот код)

/* if ( validateForm() === val) {
    $('.myButton').prop("disabled", false);
}
    else{
    $('.myButton').prop("disabled", true);
    }  */

jsfiddle

JS

function validateForm() {
    val = true;
    var firstName = $('#firstname').val();
    if (!firstName) {
        $('#firstname').siblings(".error").addClass('alert-on');
        val = false;
    }
    var lastName = $('#lastname').val();
    if (!lastName) {
        $('#lastname').siblings(".error").addClass('alert-on');
        val = false;
    }
    var lastName = $('#phone').val();
    if (!lastName) {
        $('#phone').siblings(".error").addClass('alert-on');
        val = false;
    }
    var input = $('#email');
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    var is_email = re.test(input.val());
    if (!is_email) {
        $('#email').siblings(".error").addClass('alert-on');
        val = false;
    }
    var state = $('#state option:selected');
    if (state.length == 0 || $(state).val() == "") {
      $('#state').siblings(".error").addClass('alert-on');
      val = false;
    }
    var multiselectReq = $('input[type="checkbox"]:checked').length === 0;
    if (multiselectReq) {
      $('#multi-select').siblings(".error").addClass('alert-on');
      val = false;
    }
    if ($('input[type=radio][name=yesNo]:checked').length == 0) {
      $('#pick-one').children(".error").addClass('alert-on');
      val = false;
    }    
    return val;
}
$(function () {
      $('.myButton').prop("disabled", true);
    $("input").on("keyup checked", function (e) {
    e.preventDefault();
        if (!$(this).val()) { $(this).siblings('.error').addClass('alert-on'); }
        else { $(this).siblings('.error').removeClass('alert-on'); }        
       }) 

    $('input[type="checkbox"]').click(function() {
                if( $(this).prop("checked") == true) {
                  $('#multi-select').siblings(".error").removeClass('alert-on');
                }
           });

         $('input[type=radio][name=yesNo]').click(function() {
      if ( $(this).prop("checked") == true) {
        $('#pick-one').children(".error").removeClass('alert-on');
      }
         }); 


                /* if ( validateForm() === val) {
                               $('.myButton').prop("disabled", false);
                             }
                             else{
                                $('.myButton').prop("disabled", true);
                              }  */ 


    $("#form").submit(function (event) {
        if (validateForm()) {
            return;
        };
        event.preventDefault();
    });

})

HTML

<form id="form">
        <div class="">
            <input type="text" placeholder="First name*" id="firstname">
            <div class="error">Required</div>
        </div>
        <div class="">
            <input type="text" placeholder="Last name*" id="lastname">
            <div class="error">Required</div>
        </div>
        <div class="">
            <input type="email" id="email" name="email" placeholder="email">
                <div class="error">A valid email address is required</div>  
        </div>
        <div class="">
            <input type="text" placeholder="Phone*" maxlength="12" id="phone">
            <div class="error">Required</div>
        </div>
         <div class="">
                  <select id="state" name="state">
                    <option selected="selected" value="">State*</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AS">American Samoa</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
              </select>
                  <div class="error">Required*</div>
           </div>
       <div>
         <div id="multi-select">
            <lable>
               <input id="item1" name="item1" type="checkbox">Item 1
             </lable>
             <lable>
               <input id="item2" name="item2" type="checkbox">Item 2
             </lable>
         </div>
          <div class="error">Required*</div>
       </div>
       <div id="pick-one">
           <div>
               <label>Yes
                <input id="yes" name="yesNo" type="radio" value="Yes">
                </label>
                <label> No
                <input id="no" name="yesNo" type="radio" value="No">
                </label>
           </div>
             <div class="error">Required*</div>   
      </div>

        <div id="form_submit">
            <button class="myButton" type="submit">
                Submit
            </button>
        </div>
</form>

CSS

input {
  display: list-item;
  margin-bottom: 10px;
}
.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
}