JQuery焦点不会在输入框

Question

我的JQuery应该检查文本字段是否为空，如果是，则创建一个带有类错误的标签以显示更正。

如果没有，则应该仅使用提示标签（即此处的名字（必填））创建标签。但是，这不起作用。在focusout后，它不会对标签做任何事情。

有趣的是，当我用label.html替换alert()语句时，它的工作正常。

这是我的小提琴：https://jsfiddle.net/3yr2j8mx/

$(document).ready(function() {
  $('#firstname').focusout(function() {
    if (($('#firstname').val().length == 0)) {
      $('label[for="firstname"]').html('Please enter your first name.').addClass('error');
    } else {
      $('label[for="firstname"]').html('First name*').removeClass('error');
    }
  });
  $('#lastname').focusout(function() {
    if (($('#lastname').val().length == 0)) {
      $('label[for="firstname"]').html('Please enter your last name.').addClass('error');
    } else {
      $('label[for="lastname"]').html('Last name*').removeClass('error');
    }
  });
});

#container {
  margin: 0 10% 0 10%;
  padding-bottom: 2%;
  font-size: 105%:
}
@import url('https://fonts.googleapis.com/css?family=Heebo:100|Work+Sans:200,400');
 fieldset {
  width: 320px;
  padding: 20px;
  border: 1px solid #c4d;
  border-radius: 10px;
  background-color: #;
}
legend {
  font-size: 1.3em;
  font-weight: bold;
  color: #c4d;
  float: left;
  width: 100%;
  padding: 0 0 1em 0;
}
label {
  font-size: 0.8em;
  font-weight: bold;
  color: #c4d;
}
input[type="text"],
textarea {
  font-size: 0.8em;
  line-height: 140%;
  color: #c4d;
  padding: 3px;
  border: 1px solid #999;
  border-radius: 5px;
}
input[type="text"] {
  height: 18px;
  width: 220px;
  border-radius: 5px;
  border: 1px solid #c4d;
}
.radiop {
  color: #c4d;
  font-weight: bold;
  display: inline;
}
input[type="submit"] {
  width: 100px;
  height: 30px;
  padding-left: 0px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #c4d;
  color: #c4d;
  font-weight: bold;
}
textarea {
  height: 120px;
  width: 310px;
  border-radius: 8px;
  border: 1px solid #c4d;
}
input[type="text"]:focus,
textarea:focus {
  color: #9833a5;
  border: 1px solid #9833a5;
  background-color: #ffff99;
  font-weight: bold;
}
.ccontainer {
  margin-top: 8px;
  margin-bottom: 10px;
}
.short_explanation {
  font-size: 0.6em;
  color: #333;
  color: #c4d;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container-right">
  <form>
    <fieldset>
      <legend>Join us</legend>

      <div class='short_explanation'>* required fields</div>

      <div class='ccontainer'>
        <!-- <label for='firstname' >First Name*: </label><br/> -->
        <input type='text' name='firstname' id='firstname' maxlength="50" aria-required="true" autofocus>
        <br/>
      </div>
      <div class='ccontainer'>
        <!-- <label for='lastname' >Last Name*: </label><br/> -->
        <input type='text' name='lastname' id='lastname' maxlength="50" aria-required="true">
        <br/>
      </div>
      <div class='ccontainer'>
        <!-- <label for='email' >Email Address*:</label><br/> -->
        <input type='email' name='email' id='email' maxlength="50" aria-required="true">
        <br/>
      </div>
      <div class='ccontainer'>
        <!-- <label for='phone' >Phone Number:</label><br/> -->
        <input type='tel' name='phone' id='phone' maxlength="50" aria-required="false">
        <br/>
      </div>

      <div class='ccontainer'>
        <!-- <label for='message' >Why are you interested in joining?*</label><br/> -->
        <textarea rows="10" cols="50" name='message' id='message' aria-required="true"></textarea>
      </div>

      <div class='ccontainer'>
        <label for='promo'>Do you want to receive promotional emails?</label>
        <br/>
        <br>
        <input type="radio" name="promo" value="yes">
        <p class="radiop">Yes</p>
        <br>
        <input type="radio" name="promo" value="no">
        <p class="radiop">No</p>
      </div>

      <div class='ccontainer'>
        <input type='submit' name='Submit' value='Submit' id="joinSubmit" />
      </div>

    </fieldset>
  </form>

</div>